Angular 框架下ng-repeat内部使用tooltip插件的办法
2020-03-29 13:26
1311 查看
普通情况下
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button> 这样也就可以。 但是我们会发现在 angular中使用了没有效果。
解决办法
1.先写一个指令
.directive('tooltip',toolTipDirective);
function toolTipDirective() { return{ restrict:'A', link:function (scope, element, attrs) { $(element).hover(function () { $(element).tooltip('show'); },function () { $(element).tooltip('hide') }) } } }
2.加入到你需要显示的地方就可以了
<a class="home_a" data-toggle="tooltip" data-placement="top" title="{{news.title}}" ng-click="newsState(news.id)" tooltip>{{news.title | characterNumFil:11}} </a>
3.table表单的使用需要注意 直接加在td上用有点问题 可以在td里面加个标签 a span 等等
<td style="width: 30%;"><a ng-click='noticeAll(nos,1)' data-toggle="tooltip" data-placement="top" tooltip title="{{nos.title}}"> {{nos.title | characterNumFil:22}}</a>
</td>
转载于:https://www.cnblogs.com/webPang/p/8526758.html
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- AngularJS ng-repeat下使用ng-model
- angular js 上传插件 angular-file-upload 和 ng-file-upload 使用时注意事项
- AngularJS ng-repeat下使用ng-model
- AngularJS ng-repeat使用及注意事项
- AngularJS ng-repeat下使用ng-model 转
- AngularJS ng-repeat下使用ng-model
- AngularJS ng-if ng-repeat下使用ng-model
- angularjs select标签使用ng-repeat标签之后,ng-model无法更新问题解决
- angularjs directive ng-repeat里ng-click 不起作用解决办法
- Angular中的ngRepeat使用心得
- angular之ng-include和内部控制器的使用
- AngularJS ng-repeat下使用ng-model
- AngularJS ng-repeat的使用
- AngularJS ng-repeat下使用ng-model
- 使用angular中ng-repeat , track by的用处
- AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
- angular笔记(ng-repeat,ng-if)使用小技巧
- FastMM4 在三层插件框架中不能使用解决办法(IsMultiThread' from unit 'FastMM4)
- angular使用ng-repeat时的传值
- AngularJS ng-repeat下使用ng-model