I have a form made up of directives. Two parts of this form are identical in input fields, selects, and check boxes. I made a directive using isolate scope and controllerAs syntax (with bindToController=true) where the controller has a method that fires from an ngChange on the checkBox. My problem is that the controller alias I assign 'this' to in the controller is fired twice, once for each directive. The second time through that controller alias name, in my example case 'ctrlVm', is overwritten with the second scope.
A simpler directive and controller that duplicate this problem is:
function myDirective() {
var directive = {
restrict: 'AE',
priority: 100,
require: 'ngModel',
scope: {
boundObject: '=boundObj',
myArray: '='
},
templateUrl: 'myTemplate.html',
controller: controller,
controllerAs: 'ctrlVm',
bindToController: true
};
return directive;
function controller() {
ctrlVm = this;
ctrlVm.runTest = runTest;
function runTest() {
ctrlVm.myArray.push(ctrlVm.boundObject.first);
}
}
}
A full demo with the above code and html can be found at:
http://plnkr.co/edit/TdZgadsmVQiZhkQQYly1?p=preview
I am basically calling the directive twice and expecting them to result in a "one" or a "two", depending on which box you click in. But as you can see, the first controller was "overwritten" by the second and regardless of which box you check it fires the second directive's function and adds a "two" to the array regardless of which box you click.
I have done exhaustive searching all day, learning some other things along the way, but have not found more than a couple references related to this problem and both of those seemed to imply a need for either two different directives that have different controllerAs alias names or a directive that accepts a variable name for the controllerAs name. Both of those solutions seem to require two different views since my view includes the use of the controllerAs alias (which would now be different for the two directives).
So is there a way to do this, reusing the controller and with controllerAs syntax, and have the example runTest() function exist separately for the two directives? Thank you for any help.
In your controller for the directive you don't declare the variable ctrlVm.
So change:
function controller() {
ctrlVm = this;
ctrlVm.runTest = runTest;
function runTest() {
ctrlVm.myArray.push(ctrlVm.boundObject.first);
}
}
To:
function controller() {
var ctrlVm = this;
ctrlVm.runTest = runTest;
function runTest() {
ctrlVm.myArray.push(ctrlVm.boundObject.first);
}
}
http://plnkr.co/edit/Qab1lpgbrK8ZRLZiRdaQ?p=preview
Related
I got a directive that loads a different template depending on the variable type that is passed to it. I pass to the isolated scope of the directive the variables patient and service too.
.directive('serviceCharts', serviceCharts);
function serviceCharts() {
return {
restrict: 'E',
link: function (scope, element, attrs) {
if(attrs.type) {
scope.template = 'views/' + type + '.html';
}
attrs.$observe('type', function (type) {
if(attrs.type) {
scope.template = 'views/' + type + '.html';
}
});
},
template: '<div ng-include="template"></div>',
scope:{
patient:'=',
service:'='
}
};
}
In the template (views/myservice.html for example) I load the controller:
<div ng-controller="myCtrl as vm">
VIEW
</div>
And in the controller (myCtrl) I access to the patient and service this way:
service = $scope.$parent.$parent.service;
patient = $scope.$parent.$parent.patient;
This works fine, but I don't like this way of accessing the variables via the $parent.$parent. This is messing with my tests too.
Is there another (better) way to do this?
Thank you!
You could create a wrapper object for patient & service properties. That can be named as model & then provide that model object to your directive.
Then problem with your current approach is, ng-include create a child scope for template which it renders in it. So as your passing primitive type object binding to directive, If you are changing any of child primitive type binding in child scope. It loses a binding that's why tend to using $parent.$parent notation exactly bind to original source object.
$scope.model = {
patient:'My Patient',
service:'My Service'
};
By making above object structure will ensure you're following Dot Rule. Usage of Dot Rule will avoid $parent.$parent explicit scope annotation.
Directive scope binding will changed down to below
scope:{
model:'='
}
And directive usage will look like below
<service-charts type="{{'sometype'}}" model="model"></service-charts>
The other alternative than Dot Rule to such kind of scoping related issue is follow controllerAs pattern. But then as you are gonna use isolated scope with controllerAs you should make bindToController: true option to true for making sure all the scope are merged down to controller context.
scope:{
patient:'=',
service:'='
},
controllerAs: '$ctrl',
bindToController: true
And then use $ctrl before each directive scoped variable.
Yes, there is a better way to do this. You should use services and store variables in those services (in your case you should create a factory for storing data). Then you can inject those services and access their data.
Sidenote:
You can use { ..., controller: 'controllerName', controllerAs: 'vm' } syntax in your directive so you do not need to declare those in your html.
I have - ng-view - template create item functionality and same template containing one directive that load the saved items.
Now, when i do save create item and immediately, its not refreshing list of items (from directive).
Can anyone tell me how I would resolve this, so, after saving item, immediately directive is refreshed.
Note: directive link function is making call to $http and retrieving data and populate in directive template. And directive element is added in other html template.
html template: (which has separate controller and scope).
<div>.....code</div>
<div class="col-md-12">
<parts-list></parts-list>
</div>
directive code:
(function () {
angular.module("application")
.directive("partsList", function (partService) {
return {
templateUrl: 'partsListView.html',
restrict: 'E',
scope: {},
link: function ($scope) {
$scope.partList = [{}];
RetrieveParts = function () {
$scope.partList=partService.RetrieveParts();
};
}
};
});
})();
For starters, your ReceiveParts variable doesn't have proper closure. Also, are you calling this function? I'm not sure where this function gets executed.
link: function ($scope) {
$scope.partList = [{}];
RetrieveParts = function () {
$scope.partList=partService.RetrieveParts();
};
}
An easy trick I've learned that makes it trivial to execute some of the the directives linking function logic in sync with angularjs's digest cycle by simply wrapping the logic I need in sync with the $timeout service ($timeout is simply a setTimeout call followed by a $scope.$apply()). Doing this trick would make your code look like:
link: function ($scope) {
$scope.partList = [{}];
$scope.fetchedPartList = false;
$timeout(function() {
$scope.partList = partService.RetrieveParts();
$scope.fetchedPartList = true;
});
}
Additionally, you'll notice the boolean value I set after the partList has been set. In your HTML you can ng-if (or ng-show/hide) on this variable to only show the list once it's been properly resolved.
I hope this helps you.
Use isolated scope in directive:
return {
templateUrl: 'partsListView.html',
restrict: 'E',
scope: {partList: '='},
and in template:
<parts-list partList="list"></parts-list>
Where list is where ui will update with updated data.
See how isolated scope using basic Example
I'm having a bit of trouble understanding scopes and the relation between scopes in a directive and scope in a controller..
I have a directive displaying a navbar like this, in the navbar I want to display a name, that i stored using localStorage
(function (module) {
var navbar = function () {
return {
restrict: "AE",
controller: function ($scope, localStorage) {
$scope.name = localStorage.get("name");
},
templateUrl: "/app/NSviewer/templates/nav.html"
};
};
module.directive("navbar", navbar);
}(angular.module("anbud")));
Now when this page is loaded for the first time the localStorage haven't set the name value. So the navbar gets name = null. Then the controller does:
localStorage.add("name", name);
and the name is set, if I refresh the page the navbar is loaded again, this time the name is stored in localstorage and it is displayed correctly.
So I want to do something like $scope.name = 'John Smith' in the controller and then have my directive / navbar update.
Storing a value to be shared between a controller and a directive in local storage is overkill. Typically you do the following:
(function() {
'use strict';
angular
.module('app')
.directive('dashboard', dashboard);
function dashboard() {
var directive = {
restrict: 'E',
controller: 'DashboardController',
controllerAs: 'vm',
bindToController: {
msg: '#'
},
scope: {},
templateUrl: '/templates/dashboard/dashboard.html'
};
return directive;
}
angular
.module('app')
.controller('DashboardController', DashboardController);
DashboardController.$inject = [];
function DashboardController(){
var vm = this;
vm.msg = 'Hello World'
}
})();
Some things to note:
The bindToController can accept an object. This is something that could only accept a boolean pre angular 1.4. Now it can act just like the scope property and attach stuff to be used by your controller to pass data.
The use of # means that it's a 1 way data bound string. = sets up a two-way bound relationship and there's also the & property. See this post for an overview of what they all mean
Another difference between what I'm doing is that I'm using var vm = this as opposed to injecting $scope This is quite a popular approach nowadays and means you don't get riddled with scope soup. But you can think of it as a way to do the same thing essentially (that is binding stuff but it cannot listen for events so please remember that)
Good luck
I have a directive whose 'config' attribute value I need to access inside my directive controller.
Since the controller constructor get executed first,communication from controller to link is possible but not vice versa.
What should be the best way to achieve this?
I have considered the following approaches
1)Add the variable to scope-
That would in my opinion pollute the scope,making the variable accessible every where else where the scope is being shared.
2)Use $broadcast
Again the same issue as above
3) Pass a callback function on controller's this and call it from the link function with config as its argument
4)Pass the value through a service- In my case I have multiple such directives that would need to pass date through this service
Or is there some better approach that I am missing out for doing this?
module.directive('myDirective',function(){
return{
restrict:'E',
templateUrl:'path/to/html',
link:function(scope,iElement,iAttrs,controller){
var config=iAttrs.config;
//How to access this value inside the directive controller?
},
controller:function($scope){
//the directive attribute 'config' is required here for some larger computations which are not
//manipulating the DOM and hence should be seperated from the link function
})
There you can use isolated scope concept where you create isolated scope inside your controller & that would not be prototypically inherited from its parent scope. For that you need to use scope: { ... } inside your directive option. There are three options to pass scope value inside a directive through attribute
# : One way binding
= : Two way binding
& : Expression
In your case first two cases would be fine that are depends which one you need to use. If you just want to pass the value of scope variable to the directive in that case you could use 1st approach which would be # one way binding.
If you want to update the variable in both directive as well as controller from where it come i.e. nothing but two way binding, then you need to use =
I think = suits in your case so you should go for =
Markup
<my-directive config="config"></my-directive>
Directive
app.directive('myDirective', function() {
return {
restrict: 'E',
scope: {
config: '='
},
templateUrl: 'path/to/abc.html',
link: function(scope, iElement, iAttrs, controller) {
//here it will be access as scope.config
console.log(scope.config);
},
controller: function($scope) {
console.log($scope.config); //here also it would be available inisde scope
//you could put a watch to detect a changes on config
}
}
});
Demo Plunkr
Update
As config value has been provide from the attribute with expression like {{}} so we could get those changes inside controller by putting [**$observe**][2] on $attrs. For that you need to inject $attrs dependency on your controller that will give you all the attributes collection which are available on directive element. And on the same $attrs object we gonna put $observe which work same as that of $watch which does dirty checking & if value gets change it fires that watch.
Directive
app.directive('myDirective', function() {
return {
restrict: 'E',
templateUrl: 'path/to/abc.html',
link: function(scope, iElement, iAttrs, controller) {
//here it will be access as scope.config
console.log(scope.config);
},
controller: function($scope,$attrs) {
//you could put a watch to detect a changes on config
$attrs.$observe('config', function(newV){
console.log(newV);
})
}
}
});
Updated Demo
I have a directive which looks something like:
var myApp = angular.module('myApp',[])
.directive("test", function() {
return {
template: '<button ng-click="setValue()">Set value</button>',
require: 'ngModel',
link: function(scope, iElement, iAttrs, ngModel) {
scope.setValue = function(){
ngModel.$setViewValue(iAttrs.setTo);
}
}
};
});
The problem is that if I use this directive multiple times in a page then setValue only gets called on the last declared directive. The obvious solution is to isolate the scope using scope: {} but then the ngModel isn't accessible outside the directive.
Here is a JSFiddle of my code: http://jsfiddle.net/kMybm/3/
For this scenario ngModel probably isn't the right solution. That's mostly for binding values to forms to doing things like marking them dirty and validation...
Here you could just use a two way binding from an isolated scope, like so:
app.directive('test', function() {
return {
restrict: 'E',
scope: {
target: '=target',
setTo: '#setTo'
},
template: '<button ng-click="setValue()">Set value</button>',
controller: function($scope) {
$scope.setValue = function() {
$scope.target = $scope.setTo;
};
//HACK: to get rid of strange behavior mentioned in comments
$scope.$watch('target',function(){});
}
};
});
All you need to do is add scope: true to your directive hash. That makes a new inheriting child scope for each instance of your directive, instead of continually overwriting "setValue" on whatever scope is already in play.
And you're right about isolate scope. My advice to newbies is just don't use it ever.
Response to comment:
I understand the question better now. When you set a value via an expression, it sets it in the most immediate scope. So what people typically do with Angular is they read and mutate values instead of overwriting values. This entails containing things in some structure like an Object or Array.
See updated fiddle:
http://jsfiddle.net/kMybm/20/
("foo" would normally go in a controller hooked up via ngController.)
Another option, if you really want to do it "scopeless", is to not use ng-click and just handle click yourself.
http://jsfiddle.net/WnU6z/8/