我正在尝试设置一个带有三个指令的角度应用程序 - 容器,getter和setter。我把它举起来了 http://plnkr.co/edit/CoYLuVbiZTFWvNsN5r5L?p=preview
<container>
<getter name="first"></getter>
<getter name="second"></getter>
<setter name="setter"></setter>
</container>
Container
的变量value
的范围可由getter
和setter
读取。 getter
显示值,setter
显示并更改值。
angular.module("app").directive('container', function() {
return {
scope: {},
template: '<h1>Container <input ng-model="value"/></h1><div ng-transclude>SCOPED1</div>',
transclude: true,
controller: ["$scope", "$window", function($scope, $window){
$scope.value = "Hello"
}]
};
});
getter
和setter
都有自己的隔离范围,但也有container
范围的双向绑定来获取和设置value
。
angular.module("app").directive('getter', function() {
return {
require: '^container',
scope: {
name: '@',
value:'='
},
template: '<p>I am getter {{name}}, I got {{value}}</p>'
};
});
目前,getter
和setter
可以使用container
访问$scope.$parent.$parent.value
范围,但这似乎太笨重了。我认为使用scope:{value:'='}
会设置双向绑定,但显然不是。
我做错了什么?
答案 0 :(得分:1)
指令隔离范围不会自动链接到父范围中的变量。您必须告诉指令value
在父作用域中应该是value
,与提供指令名称的方式相同。
<container value="value">
<getter name="first" value="value"></getter>
<getter name="second" value="value"></getter>
<setter name="setter" value="value"></setter>
</container>