Angular Directives基于属性的模板变量

Question

我有一个生成Box div的指令。

/template/boxes.html

<box index=0></box>
<box index=1></box>

/box.js

app.controller('BoxController', ['$scope', function ($scope) {

 $scope.boxIndex = false;

}]);

app.directive('box', function () {

    return {
     restrict: 'E',
     templateUrl: '/partials/_box.html',
     link: function (scope, element, attrs) {
      scope.boxIndex = attrs.index;
     }
    }

});

/partials/_box.html

<div class="box{{boxIndex}}"></div>

我将输出视为

<div class="box1"></div>
<div class="box1"></div>

而不是

<div class="box0"></div>
<div class="box1"></div>

我是否应该做其他事情以使两个实例分开？

Answer 1

您的指令共享父控制器的范围，因此访问相同的值。由于您使用的是插值，它们都会更新为最后一个设定值。

改为使用scope: true或scope: {}：

app.directive('box', function () {
    return {
        restrict: 'E',
        scope: {}, // or scope: true
        templateUrl: '/partials/_box.html',
        link: function (scope, element, attrs) {
            scope.boxIndex = attrs.index;
        }
    }
});

Demo