Tooltip di bootstrap con angularjs utilizzando $ http per caricare il contenuto del suggerimento

Question

Sto correndo in un piccolo problema che non riesco a capire. Il codice seguente funziona, tranne che per la prima volta che si passa il mouse sopra il collegamento. Qualsiasi aiuto è molto apprezzato.

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, quindi chiamando .tooltip() prima della chiamata AJAX potrebbe sembrare una buona idea, ma il metodo copia il data-original-title o 'title' nelle sue variabili interne, quindi non si può cambiare: (.

la cosa è che tooltip di chiamata() ascolta solo gli eventi onmouseover. È necessario chiamare .tooltip('show') per farlo apparire a livello di codice.

Ecco il violino di lavoro: http://jsfiddle.net/rB5zT/49/

Questo è il modo corretto per farlo:

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'); 
     }); 
     }); 
    } 
} 
});