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 || '';
    });
}