Dynamically disable tooltip when element becomes disabled

[Scott L]

I am trying to prevent twitter bootstrap tooltips from showing when the element is disabled. I am able to do so with the following code:

app.directive("tooltip",function(){

return {

restrict:"A",

require: 'tooltipDirection',

link:function(scope,element,attrs,directionController){

     

      if(scope.$eval(attrs.ngDisabled)!=true){

          $(element).attr('title',attrs.tooltip).tooltip({placement:directionController.direction});

      }

}

};

});

However, this only works when the page loads and the element is already enabled or disabled. I need a way of dynamically disabling the tooltip so that if something on the page disables the element, the tooltip will also become disabled. 

Thanks in advance.

[Sebastian Sebald]

You can use attrs.$observe for this: http://docs.angularjs.org/guide/directive#attributes

[Scott L]

Thanks, however this still doesn't seem to be updating. I am guessing I am doing something wrong. 

The $observe gets called initially, however, doesn't execute when the variable changes.  To summarize, I have a button (Edit) that when clicked changes the value of a scope variable (editing_bln). Another button (Add) becomes disabled based upon this variable change via ngDisabled. However, the tooltip is still showing. Here's the button code:

<button type="button" ng-class="{'btn-danger':editing_bln}" class="btn btn-mini" style="margin-top:10px;margin-left:20px;" ng-click="editing_bln = !editing_bln"><i tooltip-direction="top" tooltip="Click to Edit Content" ng-class="{'icon-white':editing_bln}" class="icon-pencil"></i></button>

<button ng-disabled="editing_bln" type="button" class="btn btn-mini" style="margin-top:10px;" ng-click="responseAdd()"><i tooltip-direction="top" tooltip="Add response to group."  class="icon-plus"></i></button>

 // TOOLTIP DIRECTIVE

app.directive("tooltip",function(){

return {

restrict:"A",

require: 'tooltipDirection',

link:function(scope,element,attrs,directionController){

     

      attrs.$observe('ngDisabled',function(value){

          console.log("ngDisabled has changed: " + attrs.ngDisabled);

      });

      if(scope.$eval(attrs.ngDisabled)!=true){

          $(element).attr('title',attrs.tooltip).tooltip({placement:directionController.direction});

      }

}

};

}); 

[Sebastian Sebald]

Of course, ... sorry. That was dumb.

I made a plunk for you: http://plnkr.co/edit/PQsXaOWtYJNRoFTPQknm?p=preview ( please consider doing a plunk, if you run in a problem again! :) )