$ httpを使用してツールチップの内容をロードするanglejsを持つブートストラップのツールチップ

Question

私は理解できないような小さな問題にぶつかっています。以下のコードは、初めてリンク上にカーソルを置いた場合を除いて動作します。どんな助けでも大歓迎です。

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]をので、私たちはそれを変更することはできませんAJAX呼び出しは良いアイデアのように見えるかもしれません前.tooltip()を呼び出しますが、その内部変数にメソッドのコピーdata-original-titleまたは'title'： （。

これは、呼び出すツールチップ（）はonmouseoverイベントを聴くだけです。.tooltip('show')を呼び出して、プログラムで表示させる必要があります。

012ここで

は作業フィドルです：http://jsfiddle.net/rB5zT/49/

は、これはそれを行うための正しい方法である：

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