Angularjs Directive - Isolated scope value is undefined
Question
I am a newbie in angularjs. I am little confused about isolated scope in directives. I have the following code,
HTML
<!doctype html>
<html ng-app="myApp">
<body ng-controller="componentsController">
<div class="scope-one" data-param="a">
<div class="scope-two" data-param="c"></div>
</div>
<!---->
</body>
</html>
Script
angular.module('components', [])
.controller('componentsController', function($scope){
$scope.a = {
"b": 1
};
$scope.c = {
"d": 2
};
});
angular.module('myApp', ['components'])
.directive('scopeOne', function() {
return {
restrict: 'C',
scope: {
a: "=param"
},
link: function(scope, element, attrs) {
console.log('one', scope);
}
};
})
.directive('scopeTwo', function() {
return {
restrict: 'C',
scope: {
c: "=param"
},
link: function(scope, element, attrs) {
console.log('two', scope);
}
};
})
Demo http://jsfiddle.net/jPtb3/23/
Problem I have two directives scope-one and scope-two and I am using scope-two inside scope-one . For scope-one , the isolated scope is fine and proper whereas for scope-two the values is undefined . I am not getting the problem, am I doing something wrong? Both the isolated scope values are fine, when one directive is not in another.
1 answers
solution1
3 ACCPTED 2013-11-09 07:53:20
Scenario 1 : When scope-two is not inside scope-one both the directives are directly under the scope of the controller and everything works as expected.
Scenario 2 : When scope-two is inside scope-one the former directive moves inside the scope of the latter and not directly under the scope of the controller.
In this situation you would need to use $parent to access the model c of the controller scope.
This works for me:
<div class="scope-one" data-param="a">
<div class="scope-two" data-param="$parent.c"></div>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.