I'm trying to build a very simple Angular directive:
app.directive("myDirective", function () {
return {
template: "{{result}} {{result.startTime}}",
scope: {
result: '#result'
}
};
});
And I use it this way in the view:
<div my-directive result="{{result}}"></div>
the problem is that {{result}} is displayed correctly (as a json) abject, while {{result.startTime}} is not displayed, despite the fact that the displayed {{result}} contains the startTime property.
2 problems:
1 You need to pass the model in, not the interpolated string.
<div my-directive result="result"></div>
2 You need to assign the value to the directive, so use '=' instead of '#' which gives you the 1-way binding from the directive back to DOM only.
app.directive("myDirective", function () {
return {
template: "{{result}}, {{result.startTime}}",
scope: {
result: '='
}
};
});
Working Demo
app.directive("myDirective", function () {
return {
template: "{{result}} {{result.startTime}}",
scope: {
result: '='
}
};
});
You're using the wrong isolate scope symbol there I believe, # will give you the string representation of the variable passed in = will two way bind, if the name is the same as the property you can leave it out and just use = as shown above.
try to use the "=" rather than the "#". The "#" brings it in as a string reference.
scope: {
result: "="
}
Related
In html I have this object passed into directive
<lcd-code ldcCode="{{ detail.program.ldcCode }}"></lcd-code>
detail.program.ldcCode = "PSIH" ...
However in the Directive it is undefined
var lcdCode = function (customerService, $sce) {
return {
replace: true,
restrict: "E",
scope: {
ldcCode: "=" // two way
},
link: function (scope, element, attrs) {
console.log('scope.ldcCode',scope.ldcCode); // says undefined
}
};
}
Previously I was using "#" and then attrs.ldcCode seemed to work... I guess the end result of what data I was working with and sending back I figured that I wanted the 2 way data binding.
You need to use without {{}} for two way binding
<lcd-code ldcCode="detail.program.ldcCode"></lcd-code>
You do not have to use Expression , remove the {{}}
<lcd-code ldcCode="detail.program.ldcCode"></lcd-code>
I have shop attribute, which I want to treat differently, depending on what type passed into (it can be string or object). How do I properly bind this attribute, so that I could pass string and object, and then treat it differently, depending on the passed type?
This way object passing works perfectly fine, but passing a string gives this attribute a value '0':
angular.module('showcaseApp')
.directive('card', function ($window, $state) {
return {
templateUrl: '/card.html',
restrict: 'E',
replace: true,
scope: {
shop: '='
},
link: function(scope, element, attrs) {
attrs.$observe('shop', function (value) {
if (value) {
}
});
}
};
});
Binding with & allows me to pass a string (catch it with $observe), but an object can't be passed this way. And I want to be able to pass both. This can be solved only by creating a new attribute with different binding?
Figured it out. I passed a string like this:
var id = scope.pageContent.content[i].id;
Instead I should pass it like this:
var id = "'" + scope.pageContent.content[i].id + "'";
And everything works ✨
I've followed Angular docs precisely to get a directive working with an isolated scope containing a couple of vars from the parent Controller's scope object.
app.controller('MainCtrl', function($scope) {
$scope.name = 'Parent Name';
$scope.pokie = {
whyIs: "thisUndefined?"
};
});
app.directive('parseObject', function() {
var preLink = function($scope, el, att, controller) {
console.log('[link] :: ', $scope);
};
var postLink = function($scope, el, att, controller) {
console.log('[PostLink] :: ', $scope);
console.log('[$Parent] :: ', $scope.$parent.name);
};
return {
restrict: 'E',
scope: {
myPokie: '=pokie',
name: '=name'
},
template: [
'<div>',
'<h1>Directive does not get parent scope</h1>',
'<h1>{{ myPokie }}</h1>',
'<h2>{{ name }}</h2>',
'</div>'
].join(''),
compile: function() {
return {
pre: preLink,
post: postLink
}
}
}
});
http://plnkr.co/edit/FpQtt9?p=preview
Can anyone tell me what is wrong with my code? Why does the directive's Isolate scope return undefined values for 'myPokie' and 'name'?
I've seen other people saying you have to use $scope.watch for this.. but angular's directive docs don't say anything about that.. And I really don't want to use $scope.watch for something so trivial which should work out of the box.
As you declared isolated scope in your directive, that means you are going to provide those value to your directive using attribute.
scope: {
myPokie: '=pokie',
name: '=name'
}
This means your directive scope will not be prototypically inherited from the parent scope. pokie attribute provide the value for myPokie & name attribute will provide value of name for your directive, = indicating a two way binding if your myPokie value change in directive, the same referencing value will change in the parent controller. The same is true for the name attribute.
Your directive element markup should be:
<parse-object pokie="pokie" name="name"></parse-object>
Working Plunkr
You're using isolated scope but you're not passing the variables. The problem is in your HTML:
Change your HTML from:
<parse-object></parse-object>
To:
<parse-object pokie="pokie" name="name"></parse-object>
Isolated scope takes its parameters from the DOM element. So if you have inside the scope declaration:
myPokie: '=pokie',
That means that myPokie variable should be taken from the pokie attribute that's on the scope. Your name: "=name" can be changed to name: "=" since it is exactly the same name.
Plunker
I have 3 nested, isolate scope, directives (see CodePen here) and I am able to pass a function (that takes an argument) from the outermost directive to the innermost directive (passing the function from outer directive to intermediate directive to inner directive).
What I'm failing to understand is what needs to be done to pass the argument from the inner directive back through intermediate directive back to the outer directive.
Again, see the CodePen example.
Note: Given only 2 isolate scope directives I can get this to work with something similar to the following...
angular.module('myApp', [])
.directive('myDir1', function() {
return {
template: '<div><my-dir-2 add-name="addName(name)"></my-dir-2></div>',
controller: function($scope) {
$scope.addName = function(name) {
alert(name); // alerts 'Henry'
};
}
}
})
.directive('myDir2', function() {
return {
scope: {
addName: '&'
},
template: "<span ng-click='addName({name: testName})'>Click to Add {{testName}}!</span>",
controller: function($scope) {
$scope.testName = 'Henry';
}
}
});
The above code gives me an Alert box with 'Henry' (just like I'd expect).
It's when I add an third, intermediate, isolate scope directive that I run into problems...
angular.module('myApp', [])
.directive('myDir1', function() {
return {
template: '<div><my-dir-2 add-name="addName(name)"></my-dir-2></div>',
controller: function($scope) {
$scope.addName = function(name) {
alert(name); // alerts 'Henry'
};
}
}
})
.directive('myDir2', function() {
return {
scope: {
addName: '&'
},
template: '<div><my-dir-3 add-name="addName({name: testName})"></my-dir-3></div>',
}
})
.directive('myDir3', function() {
return {
scope: {
addName: '&'
},
template: "<span ng-click='addName({name: testName})'>Click to Add {{testName}}!</span>",
controller: function($scope) {
$scope.testName = 'Henry';
}
}
});
This code gives me an alert box with undefined...
A common misconception is that "& is for passing functions". This isn't technically correct.
What & does is create a function on the directive scope that, when called, returns the result of the expression evaluated against the parent scope.
This function takes an object as an argument that will override local variables in the expression with those from the directive scope (the {name: testName}) object in this case.
If you were to look under the hood, the $scope.addName method in myDir2 would look like this (simplified):
$scope.addName = function(locals) {
return $parse(attr.addName)($scope.$parent, locals);
}
Your second directive works because the expression it is binding to is
addName(name)
This expression has a local variable name, that is overridden with the value of testName from the directive when executed with
addName({name: testName}) //in the directive.
Remember - the addName function in myDir2 IS NOT the same as the addName function in myDir1. It is a new function that evaluates the expression
addName(name)
against the parent scope and returns the result.
When you apply this logic to myDir3, the expression that is evaluated is:
addName({name: testName})
Note that the only local variable in this expression is "testName". So when you call in myDir3 with
addName({name: testName})
there is no local variable name to override, and testName is left undefined.
Phew! No wonder this confuses JUST ABOUT EVERYBODY!
How to fix in your example:
You want the expressions to evaluate to the actual function in myDir1.
angular.module('myApp', [])
.directive('myDir1', function() {
return {
template: '<div><my-dir-2 add-name="addName"></my-dir-2></div>',
controller: function($scope) {
$scope.addName = function(name) {
alert(name); // alerts 'Henry'
};
}
}
})
.directive('myDir2', function() {
return {
scope: {
addName: '&'
},
// addName() returns the actual function addName from myDir1
template: '<div><my-dir-3 add-name="addName()"></my-dir-3></div>',
}
})
.directive('myDir3', function() {
return {
scope: {
addName: '&'
},
//calls addName() on myDir2, which returns addName from myDir1, then invokes it passing testName as an argument
template: "<span ng-click='addName()(testName)'>Click to Add {{testName}}!</span>",
controller: function($scope) {
$scope.testName = 'Henry';
}
}
});
Here is the working Pen
Final note - the reason why '&' is more appropriate than '=' here is that '=' is going to actually set up a $watch and two-way bind the variables between the directives. This means that myDir2 could actually change the function appName in myDir1, which is not required and undesirable. It also requires setting up two $watchs, which I try to avoid for performance reasons in Angular.
There are two ways to pass a function in an isolated scope. While '&' will make sure that what you are passing is in-fact a function, you can also pass a function as a bound variable with '=', and invoke it only when you need. This method has drawbacks, but it will leave the control of the invocation to the component that is in-charge of that invocation.
Your codepen working
angular.module('myApp', [])
.directive('myDir1', function() {
return {
template: '<div><my-dir-2 add-name="addName"></my-dir-2></div>',
controller: function($scope) {
$scope.addName = function(name) {
alert(name);
};
}
}
})
.directive('myDir2', function() {
return {
scope: {
addName: '='
},
template: '<div><my-dir-3 add-name="addName"></my-dir-3></div>'
}
})
.directive('myDir3', function() {
return {
scope: {
addName: '='
},
template: "<span ng-click='addName(testName)'>Click to Add {{testName}}!</span>",
controller: function($scope) {
$scope.testName = "Henry"
}
}
});
The problem with your code with three nested directives is that testName does not exist in isolated scope of myDir2. You can set that from myDir3, but for that you will have to create an object in scope of myDir2 and set its property to testName and then use that property in myDir2
The working example is here
http://codepen.io/anon/pen/Wveqwx
'myDir2' when you have 3 directives is referencing 'testName', but it doesn't exist in that scope. It was mapped to 'name' in the 'myDir3'. Because of this, changing the template in myDir2 as follows, should fix it:
template: '<div><my-dir-3 add-name="addName({name: name})"></my-dir-3></div>'
You can access an elements scope using isolateScope()
In the myDir1 directive replace the controller to this instead
link: function($scope, elem) {
$scope.addName = function(name) {
var e = elem.find('my-dir-3');
var s = e.isolateScope();
alert(s.testName);
};
Another way is to potentially use $$nextSibling to get the next scope after current parent (haven't really used this so may want to read up on it)
This is probably not the 'angular way' to do things. I think removing the isolated scope from the child directives and having them reference the parent directive model would be more ideal.
I have two directive, I want to count how much sons in father tag and display the counter in index.html as shown after JS files, the problem is that I didn't get the number correctly
module.directive('directiveFather', function () {
return {
restrict: 'E',
scope: {},
controller: function ($scope) {
$scope.AllCounter = 0;
this.addCounter = function () {
$scope.AllCounter = $scope.AllCounter + 1;
}
}
}
})
module.directive('directiveSon', function () {
return {
restrict: 'E',
scope: {},
require: '^directiveFather',
link: function(scope, element, attrs, fatherCtrl){
fatherCtrl.addCounter();
}
}
}
})
<directive father>
<directive son>
</directive son>
{{AllCounter}}
</directive father>
If you use an isolate scope, then the elements inside directiveFather will be bound to the parent scope (thus AllCounter won't be directly available in the view - although it will hold the correct value).
You can either change scope: {} to scope: true/false in directiveFather (see demo 1) or
"manually" compile, link and append the HTML to the directiveFather element (see demo 2).
(There is, also, Wildhoney's suggestion of using transclusion and template.)
Basically, you don't need any of that for the approach to work - they are only necessary to demonstrate that everything works (by displaying the counter in the view), but even without appending the counter, the addChild() function gets called as expected.
That said, after fixing the element names (<directive-father> and <directive-son>), it works as expected.
See, also, these short demos: demo 1, demo 2.