2015-06-17 12 views
7

ng-repeat. aracılığıyla oluşturulan bir tablonun ilk satırı için tooltip oluşturmaya çalışıyorum ama araç ipucu oluşturmuyor.Bootstrap araç ipucu açısal ng-yineleme ile oluşturulmuyor

HTML angularjs ekler/ng tekrar ile anında elemanları (veri-bağlama) kaldırır, çünkü olur

<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> 

cevap

10

.

Bunu önlemek için, yeni öğe oluşturulduğunda, araç ipucunun düzgün şekilde başlatılması için bir yönerge oluşturmanız gerekir.

Öncelikle, aşağıdaki yönergeyi oluşturmanız gerekir:

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

Sonra ipucu görünmesini istediğiniz elemanın üzerine "araç ipucu" özelliğini ekleyin tarih:

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

Kaynak: Using Bootstrap Tooltip with AngularJS

2

Cevabıma bakın here. Kaynak kodu: here

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

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

    }; 
    }); 
:

fikir yönergesini kullanmaktır