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

演示