Reputation: 6639
I have been scratching my head on this particular test for hours. I believe that the demonstrated directive should be working, yet I am getting undefined for the value being passed to the isolate scope.
Code:
html
<!doctype html>
<html ng-app="myApp">
<body>
<a ng-href="#" class="test-scope" name="test">Console should say 'test' but gives undefined</a>
</body>
</html>
javascript
angular.module('myApp', [])
.directive('testScope', function() {
return {
restrict: 'C',
scope: {
name: "="
},
link: function(scope, element, attrs) {
console.log(scope.name);
}
};
});
Here's the fiddle: http://jsfiddle.net/jPtb3/8/
Any help would be appreciated, I must be doing something wrong.
Upvotes: 0
Views: 676
Reputation: 42669
You are interpreting the isolated scope constructs incorrectly.
When you say name=
you are saying that there is attribute on the directive declaration html which is of same name name
and whatever the attribute value is present, bind to that property name in the scope.
In this case there should be a scope property name test
on the scope where directive is declared. The name
property on the directive scope would point to this test property on parent (not literally)
Bottom line your directive scope name
-> container scope test
property.
See my plunker here http://jsfiddle.net/cmyworld/ANzUf/
Upvotes: 1
Reputation: 77930
Change =
to @
angular.module('components', [])
.directive('testScope', function() {
return {
restrict: 'C',
scope: {
name: "@"
},
link: function(scope, element, attrs) {
console.log(scope.name);
}
};
})
angular.module('myApp', ['components']);
See fixed Fiddle
@
– binds the value of parent scope property (which always a string) to the local scope.
=
– binds parent scope property directly which will be evaluated before being passed in.
Upvotes: 1