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(数据绑定(bind))动态添加/删除元素。

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

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

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>

来源: Using Bootstrap Tooltip with AngularJS