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

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

谢谢。

Answer 1

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

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

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

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

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

因此，在您的情况下，第一次将作用域变量关联到父控制器时：

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

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

Angular directive code changes scope, but template shows the same value

javascript

angularjs

scope

angularjs-scope