Directive attribute binding with Bootstrap tooltip

Question

I am having an issue where the ternary operator for the glyphicon class switching works just fine but doesn't seem to work on my custom tooltip directive. It just stays with the default Add Project and won't switch to Update Project. It obviously has something to do with my custom directive. Do I need to force a $digest cycle or add a $watch? I'm relatively new to Angular and would greatly appreciate some assistance on this one.

HTML:

<span class="glyphicon glyphicon-{{ currentproject ? 'arrow-up' : 'plus'}}" 
      ng-click="PostProject(currentproject)" 
      tooltip="{{ currentproject ? 'Update' : 'Add'}} Project">
</span>

Custom Directive:

app.directive('tooltip', function () {
    return {
        restrict: 'A',
        scope: {
            tooltip: '@'
        },
        link: function ($scope, element, attrs, ctrl) {
            $(element).tooltip({
                title: $scope.tooltip
            });
        }
    };
});

Hi Chuckie, there is a library written to handle using bootstrap in angular, it will handle things like this for you called [Angular Bootstrap](https://angular-ui.github.io/bootstrap/). Obviously you may not want to use this so I won't put it as an answer. — George, May 27 '16 at 14:29
@GeorgeLee Thank you, this is great to know for future use. I just really only need this custom directive at the moment and it is already working _most_ of the time. — Pat Migliaccio, May 27 '16 at 14:32

hansmaad · Answer 1 · 2016-05-27T14:57:25.910

1

Yes, you should add a $watch to the tooltip. Angular can't magically call $().tooltip() if the value of the expression changes.

    link: function ($scope, element, attrs, ctrl) {
      $scope.$watch('tooltip', function(newValue) {
          updateTooltip(newValue);
          // this does'nt update the existing bs tooltip:
          // see http://stackoverflow.com/a/9875490/498298
          // $(element).tooltip({ title: newValue });
      });
    }

http://codepen.io/hansmaad/pen/QEWwdw?editors=1010

edited May 27 '16 at 14:57

answered May 27 '16 at 14:14

hansmaad

18,417
9
53
94

I've copied exactly this and it still doesn't seem to update... could you think of a reason why? – Pat Migliaccio May 27 '16 at 14:19
@ChuckieSullivan Hm, I added an example. Works for me. – hansmaad May 27 '16 at 14:36
Its not the Angular that's causing the issue its something to do with the bootstrap/jquery. Your pure JS and Angular example works perfectly when I test it in my scenario. I've tried adding `$(element).tooltip('destroy');` at the beginning, inside the `$watch`, which has worked in fixing the situation but after the the first `$watch` change, it doesn't work anymore. Suggestions? @hansmaad – Pat Migliaccio May 27 '16 at 14:49
Thanks for all your help! I was able to get a solution from that. – Pat Migliaccio May 27 '16 at 15:07

score 0 · Accepted Answer · edited May 23 '17 at 10:29

0

With all credit and help going to @hansmaad and based on this, here is the final solution:

$scope.$watch('tooltip', function (newValue, oldValue) {
    $(element)
        .tooltip({
            title: newValue
        })
        .attr('data-original-title', newValue);
})

edited May 23 '17 at 10:29

Community

1
1

answered May 27 '16 at 15:06

Pat Migliaccio

1,031
13
24

Directive attribute binding with Bootstrap tooltip

2 Answers2