angularjs-ng-repeat - 引导工具提示不使用角度 ng-repeat 呈现

Question

我正在尝试为tooltip通过但工具提示创建的表的第一行创建ng-repeat. 但未呈现。

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

发生这种情况是因为 angularjs 使用 ng-repeat（数据绑定）动态添加/删除元素。

为了避免这种情况，您需要创建一个指令，以便每当创建新元素时，都会正确启动工具提示。

首先，您需要创建以下指令：

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

然后在您希望工具提示出现的元素上包含“工具提示”属性：

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

来源：使用带有 AngularJS 的引导工具提示

Answer 2

在这里查看我的答案。

源代码：这里.

这个想法是使用指令：

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

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

    };
  });