Angular 指令代码更改范围，但模板显示相同的值

Question

我有一个如下指令：

.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值。同时链接函数设置适当的值(我通过调用console.log()检查了这一事实)。

如果我scope: true属性添加到指令的代码中 - 那么一切正常。因此，似乎拥有自己的继承范围会有所帮助。你能解释一下我的这种行为吗？

谢谢。

Answer 1

当您使用scope: true时，您可以为指令创建一个子作用域，同时您还从父级继承属性(在这种情况下，我认为您的控制器)。因此，所有指令的实例都将具有其适当的范围。

使用scope: false指令实际上没有作用域，它与其父指令共享作用域。

所以，回到你的问题，有scope:false，当你这样做时：

scope.itemClasses = attrs.itemClasses || '';

您正在将itemClasses属性设置为父级的范围。 这意味着当您在链接函数中看到它似乎工作正常时，但实际上每次您都要覆盖控制器的相同范围变量时。

因此，在您的情况下，首次将范围变量关联到父控制器时：

scope.itemClasses= 'col-md-6';

但是第二次实际使用新值覆盖父级的相同范围变量时：

scope.itemClasses= 'col-md-12';

有意义吗？

Answer 2

通过直接从属性绑定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 || '';
});
}