Bootstrap-Tooltip mit angularjs mit $ http, um den Inhalt des Tooltips zu laden

Question

Ich laufe auf kleines Problem, das ich nicht scheinen kann, herauszufinden. Der folgende Code funktioniert, außer beim ersten Mal, wenn Sie den Mauszeiger über den Link bewegen. Jede Hilfe wird sehr geschätzt.

http://jsfiddle.net/LpK6d/1/

<div ng-app="myApp"> 
<a 
    class="pop-over" 
    data-original-title="default value" 
    data-placement="top">test link</a> 
</div> 

var app = angular.module("myApp", []); 

app.directive('popOver', function($http) { 
    return { 
    restrict: 'C', 
    link: function(scope, element, attr) { 

     element.bind('mouseover', function(e) { 
      $http.get("http://ip.jsontest.com/?callback=someFunction") 
       .success(function(data) { 
       attr.$set('originalTitle', data); 
       element.tooltip();     
       }); 
      }) 
     } 
    } 
}); 

Answer 1

Ok so .tooltip() Aufruf, bevor der AJAX-Aufruf wie eine gute Idee erscheinen mag, aber die Methode kopiert die data-original-title oder 'title' in seine internen Variablen so können wir es nicht ändern: (.

die Sache ist, dass Aufruf tooltip() es hört onmouseover Ereignisse nur ab. Sie müssen .tooltip('show') anrufen, um es programmatisch erscheinen zu lassen.

Hier ist die Arbeits Geige: http://jsfiddle.net/rB5zT/49/

Dies ist der richtige Weg, es zu tun:

var app = angular.module("myApp", []) 
app.directive('popOver', function($http) { 
return { 
    restrict: 'C', 
    link: function(scope, element, attr) { 
    var i =0; 
    element.tooltip(); 
    $(element).bind('mouseover',function(e) { 

     $http.get("test").success(function(){ 
      attr.$set('originalTitle', "Some text "+i++); 
      element.tooltip('show'); 
     }); 
     }); 
    } 
} 
});