更新时间:2022-10-27 16:22:31
通过定义范围:在你的指令{}
,它正在创建一个隔离范围
。
因此父范围是从现在指令不可见的。
如果您想引用父范围,那么你可以把范围:真正的
共享
范围(同指令之间),并省略只是正常范围嵌套声明范围。
或者,如果你只想引用父 $ scope.foo
,您可以定义
像你这样的明确的范围变量已经在孩子完成指令
The directive's attributes don't change when the scope is updated, they still keep the initial value. What am I missing here?
HTML
<ul class="nav nav-pills nav-stacked" navlist>
<navelem href="#!/notworking/{{foo}}"></navelem>
<navelem href="#!/working">works great</navelem>
</ul>
<p>works: {{foo}}</p>
Javascript (based on angular tabs example on front-page)
angular.module('myApp.directives', []).
directive('navlist', function() {
return {
scope: {},
controller: function ($scope) {
var panes = $scope.panes = [];
this.select = function(pane) {
angular.forEach(panes, function(pane) {
pane.selected = false;
});
pane.selected = true;
}
this.addPane = function(pane) {
if (panes.length == 0)
this.select(pane);
panes.push(pane);
}
}
}
}).
directive('navelem', function() {
return {
require: '^navlist',
restrict: 'E',
replace: true,
transclude: true,
scope: { href: '@href' },
link: function(scope, element, attrs, tabsCtrl) {
tabsCtrl.addPane(scope);
scope.select = tabsCtrl.select;
},
template:
'<li ng-class="{active: selected}" ng-click="select(this)"><a href="{{href}}" ng-transclude></a></li>'
};
});
By defining scope: {}
in your directive, it is creating a isolated scope
.
So the parent scope is now invisible from the directive.
If you want to refer the parent scope, then you can put scope: true
for shared
scope (among same directives) and omit the scope declaration for just normal scope nesting.
Or if you want to just refer $scope.foo
of the parent, you can define
explicit scope variables like you've done in the child directive.