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