Angular 指令代码更改范围,但模板显示相同的值
Angular directive code changes scope, but template shows the same value
我有如下指令:
.directive('myDirective', function() {
return {
restrict: 'AE',
replace: true,
templateUrl: '/myDirective.html?v=' + window.buildNumber,
link: function (scope, element, attrs) {
scope.itemClasses = attrs.itemClasses || '';
}
}
})
它的模板如下所示:
<div class="my-directive">
<div class="items" ng-repeat="item in items">
<div class="item {{ itemClasses }}">{{ item.title }}</div>
</div>
</div>
并且该指令在不同的地方被调用(每个模板调用一次),如下所示:
<my-directive item-classes="col-md-6"></my-directive>
...
<my-directive item-classes="col-md-12"></my-directive>
并且所有模板呈现相同的 itemClasses
值。同时 link 函数设置适当的值(我通过调用 console.log()
检查了这个事实)。
如果我将 scope: true
属性添加到指令的代码中 - 那么一切正常。因此,拥有自己的继承范围似乎有所帮助。你能解释一下这种行为吗?
谢谢。
当您使用 scope: true
时,您为指令创建了一个子作用域,同时您还继承了父作用域的属性(在这种情况下,我认为是您的控制器)。因此,您所有指令的实例都将具有其适当的范围。
使用 scope: false
你的指令实际上没有作用域,它与它的父指令共享作用域。
所以,回到你的问题,有 scope:false
,当你这样做时:
scope.itemClasses = attrs.itemClasses || '';
您正在将 itemClasses
属性 设置为父级的范围。
这意味着当你在 link 函数中看到它似乎工作正常,但实际上每次你要覆盖控制器的相同范围变量。
因此,在您的情况下,第一次将作用域变量关联到父控制器时:
scope.itemClasses= 'col-md-6';
但实际上你第二次用新值覆盖父级的相同作用域变量:
scope.itemClasses= 'col-md-12';
有意义吗?
通过直接从属性绑定 item-classes
,您基本上是在复制属性值。
解决方案是:如果你想input-classes
一个输入绑定,你可以像这样使用隔离范围:
{
restrict: 'AE',
replace: true,
scope: {
itemClasses: '='
},
templateUrl: '/myDirective.html?v=' + window.buildNumber,
link: function (scope, element, attrs) {
// scope.itemClasses = attrs.itemClasses || '';
}
}
或者以防万一您不想使用独立作用域,您可以使用 attrs.$observe
:
link: function (scope, element, attrs) {
attrs.$observe('itemClasses ', function(val) {
scope.itemClasses = val || '';
});
}
我有如下指令:
.directive('myDirective', function() {
return {
restrict: 'AE',
replace: true,
templateUrl: '/myDirective.html?v=' + window.buildNumber,
link: function (scope, element, attrs) {
scope.itemClasses = attrs.itemClasses || '';
}
}
})
它的模板如下所示:
<div class="my-directive">
<div class="items" ng-repeat="item in items">
<div class="item {{ itemClasses }}">{{ item.title }}</div>
</div>
</div>
并且该指令在不同的地方被调用(每个模板调用一次),如下所示:
<my-directive item-classes="col-md-6"></my-directive>
...
<my-directive item-classes="col-md-12"></my-directive>
并且所有模板呈现相同的 itemClasses
值。同时 link 函数设置适当的值(我通过调用 console.log()
检查了这个事实)。
如果我将 scope: true
属性添加到指令的代码中 - 那么一切正常。因此,拥有自己的继承范围似乎有所帮助。你能解释一下这种行为吗?
谢谢。
当您使用 scope: true
时,您为指令创建了一个子作用域,同时您还继承了父作用域的属性(在这种情况下,我认为是您的控制器)。因此,您所有指令的实例都将具有其适当的范围。
使用 scope: false
你的指令实际上没有作用域,它与它的父指令共享作用域。
所以,回到你的问题,有 scope:false
,当你这样做时:
scope.itemClasses = attrs.itemClasses || '';
您正在将 itemClasses
属性 设置为父级的范围。
这意味着当你在 link 函数中看到它似乎工作正常,但实际上每次你要覆盖控制器的相同范围变量。
因此,在您的情况下,第一次将作用域变量关联到父控制器时:
scope.itemClasses= 'col-md-6';
但实际上你第二次用新值覆盖父级的相同作用域变量:
scope.itemClasses= 'col-md-12';
有意义吗?
通过直接从属性绑定 item-classes
,您基本上是在复制属性值。
解决方案是:如果你想input-classes
一个输入绑定,你可以像这样使用隔离范围:
{
restrict: 'AE',
replace: true,
scope: {
itemClasses: '='
},
templateUrl: '/myDirective.html?v=' + window.buildNumber,
link: function (scope, element, attrs) {
// scope.itemClasses = attrs.itemClasses || '';
}
}
或者以防万一您不想使用独立作用域,您可以使用 attrs.$observe
:
link: function (scope, element, attrs) {
attrs.$observe('itemClasses ', function(val) {
scope.itemClasses = val || '';
});
}