javascript - Angular Directives Template variables based on attributes -
i have directive generates 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>
i'm getting output
<div class="box1"></div> <div class="box1"></div>
instead of
<div class="box0"></div> <div class="box1"></div>
is there else should doing make both instances separate?
your directives both sharing parent controller's scope , therefore accessing same value. since you're using interpolation, both update last set value.
use scope: true
or scope: {}
instead:
app.directive('box', function () { return { restrict: 'e', scope: {}, // or scope: true templateurl: '/partials/_box.html', link: function (scope, element, attrs) { scope.boxindex = attrs.index; } } });
Comments
Post a Comment