使用$ http引导使用angularjs的工具提示以加载工具提示的内容

我遇到了一个我似乎无法解决的小问题。 下面的代码有效，除了第一次将鼠标悬停在链接上。 任何帮助是极大的赞赏。

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

---

好的，在AJAX调用之前调用.tooltip()似乎是一个好主意，但该方法会将data-original-title或'title'复制到其内部变量中，因此我们无法更改它:( :(。

事情是调用tooltip（）它只是监听onmouseover事件。 您必须调用.tooltip('show')以使其以编程方式显示。

这里是工作小提琴：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');
         });
        });
   }
 }
});

链接地址: http://www.djcxy.com/p/70255.html

上一篇: Bootstrap tooltip with angularjs using $http to load the content of the tooltip

下一篇: How to prevent ksh on Linux to overwrite a global varibale by a local variable?