Chú giải công cụ khởi động không hiển thị với góc ng lặp lại

Question

Tôi đang cố gắng tạo tooltip cho hàng đầu tiên của bảng được tạo thông qua ng-repeat. Nhưng chú giải công cụ không hiển thị.

HTML

<tr ng-repeat="item in govtFiltered> 
    <td class="name" data-toggle="tooltip" data-content="{{item.hospitalName}}" title="{{item.hospitalName}}"></td> 
</tr> 

<script> 
    $(document).ready(function() { 
     $('[data-toggle="tooltip"]').tooltip(); 
    }); 
</script> 

Answer 1

Nó xảy ra vì angularjs thêm/loại bỏ các yếu tố một cách nhanh chóng với ng-repeat (data-binding).

Để tránh điều này, bạn cần phải tạo chỉ thị để bất cứ khi nào phần tử mới được tạo, chú giải công cụ được khởi tạo đúng cách.

Trước tiên, bạn cần phải tạo ra các chỉ thị sau:

app.directive('bsTooltip', function(){ 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs){ 
      $(element).hover(function(){ 
       // on mouseenter 
       $(element).tooltip('show'); 
      }, function(){ 
       // on mouseleave 
       $(element).tooltip('hide'); 
      }); 
     } 
    }; 
}); 

Sau đó bao gồm "tooltip" thuộc tính trên các yếu tố bạn muốn tooltip xuất hiện trên:

<a href="" title="My Tooltip!" bs-tooltip>My Tooltip Link</a> 

Nguồn: Using Bootstrap Tooltip with AngularJS

Answer 2

Xem câu trả lời của tôi here.

Mã nguồn: here.

Ý tưởng là sử dụng chỉ thị:

angular.module('myApp', ['ui.bootstrap']).directive('tooltipLoader', function() { 
    return function(scope, element, attrs) { 

     element.tooltip({ 
     trigger:"hover", 
     placement: "top", 
     delay: {show: 1000, hide: 0} 
     }); 

    }; 
    });