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

发布时间：2020-12-17 08:46:44 所属栏目：安全来源：网络整理

导读：我正在尝试为通过ng-repeat创建的表的第一行创建工具提示. 但工具提示不是渲染. HTML tr ng-repeat="item in govtFiltered td class="name" data-toggle="tooltip" data-content="{{item.hospitalName}}" title="{{item.hospitalName}}"/td/trscript $(docum

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!