Bootstrap工具提示无法使用角度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');
            });
        }
    };
});

然后在要显示工具提示的元素上包含"tooltip"属性:

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

来源:使用AngstJS的Bootstrap工具提示