angularjs-ng-repeat – 无法使用角度ng-repeat渲染Bootstrap工具提示

我正在尝试为通过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>

这是因为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>

资料来源：Using Bootstrap Tooltip with AngularJS

原文地址：https://www.jb51.cc/angularjs/141285.html