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

demo


Comments

Popular posts from this blog

database - VFP Grid + SQL server 2008 - grid not showing correctly -

jquery - Set jPicker field to empty value -

.htaccess - htaccess convert request to clean url and add slash at the end of the url -