fodma1 fodma1 - 1 year ago 74
AngularJS Question

Possible Angular attribute directive bug?

I'm trying to create an Angular directive which is just an HTML attribute (

). This directive uses some input attributes (

<li my-directive text="first" length="6"></li>

Everything works nicely when I use it just once. But I'd like to use it multiple times, for list items:

<li my-directive text="first" length="elements[0].len"></li>
<li my-directive text="second" length="elements[1].len"></li>
<li my-directive text="third" length="elements[2].len"></li>
<li my-directive text="fourth" length="elements[3].len"></li>

This is when I experience a weird behaviour: Each list item displays the last item's attributes. I checked it, and the directive controllers receive the different values. Still, only the last one is displayed.

I'm pretty sure someone else bumped into this before, but I couldn't find anything related.

Plunkr here


It looks like this issue can be solved using
, but I'd rather not use that. And still it looks like a bug to me.

Answer Source

use isolated scope for directive will solve the problem

.directive('myDirective', function () {
    return {
      restrict: 'A',
      bindToController: {
        // text: '@text',
        length: '='
      scope: {},
      controller: function() {
        var ctrl = this;
        return ctrl;
      controllerAs: 'ctrl',
      template: '{{ ctrl.text }} - {{ ctrl.length }}'
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download