Question

我有如下指令：

WsFilter

它的模板如下：

.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()属性添加到指令的代码中 - 那么一切正常。因此，似乎有自己的继承范围有帮助。你能解释一下这种行为吗？

谢谢。

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

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

2 个答案: