angularjsangularjs-directivetipsy

How to dynamically bind Tipsy tooltip on the Title attribute with AngularJS


Ok so I made myself a directive for jQuery Tipsy, it's working as I want it but I got a little problem with the title. I want my title to be sometime filled, sometime blank depending on a selected option (dropdown), so it's very dynamic. I do have something working with ng-attr-title but it seems to only do the job once.
Here is my directive:

.directive('ngxTipsy', function() {
    // jQuery Tipsy Tooltip
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            // possible directions:
            // nw | n | ne | w | e | sw | s | se
            element.tipsy({ 
                delayIn:0, 
                delayOut:0, 
                gravity: attrs.ngxTipsy, 
                opacity: 1, 
                html: true
            });
        }
    }
})

and here is some sample HTML code:

<select name="type" class="form-control" ng-model="mytype">
    <option value="type1">Type 1</option>   
    <option value="type2">Type 2</option>
</select>

<input type="number" name="price" ngx-tipsy="s" ng-attr-title="{{ (mytype == 'type1') ? 'some title' : '' }}" ng-model="myprice">

Please note that it does work the first time, if I select type2 directly nothing shows in my tooltip title, then I select type1 and title attribute gets filled...that is correct...but then choosing whatever else after, the title will never change. It seems that ng-attr-title only works once??? I want it to bind all the time, any suggestions?
Note:
Please note that my problem is strictly with ng-attr-title and/or the title attribute and NOT with the directive itself, I only supplied it to show how I implemented it.


Solution

  • After a few trials and errors I got it working, I was trying to update dynamically the title attribute but that is not the way to go with Tipsy extension, instead I have to use the original-title attribute for anything that is posted after the creation of the element that has a tooltip, which you can also call that has the effect of Dynamically Updating Text (like mentioned on Tipsy website). So my code has to change with this instead:

    <input type="number" name="price" ngx-tipsy="s" ng-attr-original-title="{{ (mytype == 'type1') ? 'some title' : '' }}" title="" ng-model="myprice">
    

    I added the title attribute in my answer, but it could in fact be removed without affecting the end result. What is most important is to use the attribute of original-title and so with angular it becomes ng-attr-original-title for a proper binding. It also tells me that my directive was indeed properly built.