Search code examples
angularjstooltippopoverangular-strap

angular-strap tooltip not working in ng-repeat

Question: Is there a bug in angular-strap? Or do I misunderstand how Angular works, and this is expected?

I've created a plunker to demonstrate the behavior.

What I want: I want to show a different tooltip for each item in an ng-repeat.

Behavior I'm seeing: Under certain conditions, the tooltip content is not properly inserted into the content template. Thus you only see the template, and not the content template or content itself.

Conditions:

  • When the page is first loaded, the tooltips work as expected.
  • When an item is added to the ng-repeat, its tooltip does not populate the template's content section.
  • If the page starts off with zero items in the ng-repeat, the tooltip in the first item added will work as expected. Items added after that will exhibit the problem.
  • Regardless of how many items the ng-repeat starts with, any removal of any item from it will make all items added in the future not have working tooltips.

Thoughts: If I boil it down, the "first load" works fine. After that, it doesn't. I'd guess that what happens is that there's a compilation step happening after the first round of adding items into ng-repeat. At that point, the angular-strap tooltip code sees the directive attributes, and sets up those tooltips and the content template. Subsequent changes to the ng-repeat are missed by angular-strap (even though I can see in the console that the call from bs-popover=tooltip(item) does actually run each time the ng-repeat list is updated). But I'm still stumped and wondering if this is behavior I can get around.

How do I allow dynamic tooltips in items added to an ng-repeat?

Solution

  • This seems to work in _popover.html

    <div class="popover-content">{{content}}</div>

    That is using {{ }} instead of ng-bind...works very odd.

    Upon further investigation... Its probably happening somewhere around here:

    https://github.com/mgcrea/angular-strap/blob/master/src/tooltip/tooltip.js#L83

    Though I don't know where/how/what yet.

    Update

    So the bug (in Angular-Strap) is with caching your template. Initial retrieval (via http) works fine. But it caches them as an array, and upon retrieval from cache (subsequent additions) it gets an array. Which doesn't have a .data property so your template is empty, and your ng-bind is removed..