Data from directive not displaying within ng-repeat

Question

I have broken this problem down into it's simplest form. Basically I have a directive that, for the demo, doesn't yet really do anything. I have a div with the directive as an attribute. The values within the div, which come from an object array, are not displayed. If I remove the directive from the div, they are displayed OK. I am clearly missing something really obvious here as I have done this before without any problems.

Here's the Plunk: http://plnkr.co/edit/ZUXD4qW5hXvB7y9RG6sB?p=preview

Script:

app.controller('MainCtrl', function($scope) {

  $scope.tooltips = [{"id":1,"warn":true},{"id":2,"warn":false},{"id":3,"warn":true},{"id":4,"warn":true}];

});

app.directive("cmTooltip", function () {
    return {
        scope: {
            cmTooltip: "="
        }
    };
});

HTML

<div ng-repeat="tip in tooltips" class="titlecell" cm-tooltip="true">
    A div element: {{ tip.id }}
</div>
<br><br>

Just to prove it works without the directive:
<div ng-repeat="tip in tooltips" class="titlecell">
    A div element: {{ tip.id }}
</div>

Just changing your angular version to the latest (1.2.5) makes your plunk work: https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js — Beyers, Dec 16 '13 at 12:05
Would love to do that but I have 8000 lines of code that would all need updating - not too keen! — Craig Morgan, Dec 16 '13 at 12:59

score 1 · Answer 1 · edited May 23 '17 at 11:45

As by Beyers' comment above and below, the behaviour the question is about no longer exists in at least 1.2.5

To be clearer; this has nothing to do with ng-repeat, you can remove it and there still will be no tip ( or tooltips ).

See this question on what the = and other configs mean and what it is doing for you.

Basically for your situation when you use = the scope of the directive will be used in the underlying elements, you no longer have your controller's scope. What this means for you is that there is no {{ tip.id }} or not even tip. Because the directive doesn't supply one.

Here's a plunker that demonstrates what you can do with it.

Basically all i did was

app.directive("cmTooltip", function () {
    return {
        scope: {
            cmTooltip: "="
        },
        link: function($scope){    // <<
          $scope.tip = { id: 1 };  // <<
        }                          // <<
    };
});

This creates the tip object on the scope so it has an id.

For your situation you would probably just not use = and look at this question for your other options depending on what you want.

See my comment above, just changing the original plunk to use latest (1.2.5) angular version makes it work. So I suspect there's been some bug fixes in latest versions in regards to multiple directives and isolated scopes. — Beyers, Dec 16 '13 at 12:06
Thanks, i thought i'd tried that too by changing the `data-require="angular.js@1.0.x"` I was thinking I'd already checked it, there have been many breaking changes from 1.0 to 1.2 so ill add that. — Philipp Gayret, Dec 16 '13 at 12:10
Thanks Philipp, this has really helped my understanding of isolate scopes. — Craig Morgan, Dec 16 '13 at 13:04

score 1 · Accepted Answer · answered Dec 16 '13 at 15:52

There is a hack to make it working in earlier versions of angular by making use of transclusion, like that:

app.directive("cmTooltip", function () {
    return {
        scope: {
           cmTooltip: "="
        },
        transclude:  true,
        template : '<div ng-transclude></div>'
    };
});

PLNKR

score -2 · Answer 3 · answered Dec 16 '13 at 12:18

-2

In my opinion this isn't the way to go. I would use Objects.

JS code:

  function tooltip(id,warn){
    this.id = id;
    this.warn = warn;
  }

  tooltip.prototype.toString = function toolToString(){
    return "I'm a tooltip, my id = "+this.id+" and my warn value = "+this.warn;
  }

  $scope.tooltips = [new tooltip(1,true),new tooltip(2,false),new tooltip(3,true),new tooltip(4,true)];

HTML:

<div ng-repeat="tip in tooltips" class="titlecell">
        A div element: {{ tip.toString() }}
    </div>

answered Dec 16 '13 at 12:18

svlentink

41
6

The OP knows how to make this work, by removing his directive, the question is about why it doesn't work when he applies the directive. This is not what the question is about, and you're basically even putting view logic into the JS. wtf? – Philipp Gayret Dec 16 '13 at 12:40
I agree - thanks for the answer but it has nothing to do with my question. – Craig Morgan Dec 16 '13 at 13:01

Data from directive not displaying within ng-repeat

3 Answers3