Angular 框架下ng-repeat内部使用tooltip插件的办法
普通情况下
<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>
Angular 框架下ng-repeat内部使用tooltip插件的办法的更多相关文章
- angular框架下的跨域问题(获取天气数据)
1.新浪天气:http://php.weather.sina.com.cn/iframe/index/w_cl.php?code=js&day=0&city=&dfc=1&am ...
- Angular框架
Angular 框架 Angular介绍 库和框架的区别 jQuery:库 库一般都是封装了一些常用的方法 自己手动去调用这些方法,来完成我们的功能 code $('#txt').val('我是小明' ...
- 关于在Struts2框架下实现文件的上传功能
struts2的配置过程 (1)在项目中加入jar包 (2)web.xml中filter(过滤器)的配置 <?xml version="1.0" encoding=" ...
- 微服务框架下的思维变化-OSS.Core基础思路
如今框架两字已经烂大街了,xx公司架构设计随处可见,不过大多看个热闹,这些框架如何来的,细节又是如何思考的,相互之间的隔离依据又是什么...相信很多朋友应该依然存在自己的疑惑,特别是越来越火热的微服务 ...
- Laravel框架下容器Container 的依赖注入和反射应用
依赖注入,简单说是把类里头依赖的对象,置于类外头,即客户端调用处.相当于把类与类解耦. 一个简单的例子: class A { public function __construct() { // 这种 ...
- 【Python】【Web.py】详细解读Python的web.py框架下的application.py模块
详细解读Python的web.py框架下的application.py模块 这篇文章主要介绍了Python的web.py框架下的application.py模块,作者深入分析了web.py的源码, ...
- 深入剖析 RabbitMQ —— Spring 框架下实现 AMQP 高级消息队列协议
前言 消息队列在现今数据量超大,并发量超高的系统中是十分常用的.本文将会对现时最常用到的几款消息队列框架 ActiveMQ.RabbitMQ.Kafka 进行分析对比.详细介绍 RabbitMQ 在 ...
- css或Angular框架限制文本字数
提需求的来了 某一期产品迭代时,新增了一个小功能,即:在单元格中的文本内容,字符超过20个字的时候,需要截断,并显示20个字符+一个省略号,未超过,无视. 这需求看上去不怎么复杂,看起来可以用css做 ...
- Foundation框架下的常用类:NSNumber、NSDate、NSCalendar、NSDateFormatter、NSNull、NSKeyedArchiver
========================== Foundation框架下的常用类 ========================== 一.[NSNumber] [注]像int.float.c ...
随机推荐
- mysql 查询导出(txt,csv,xls)
1 简介 工作中产品经常会临时找我导出一些数据,导出mysql查询结果数据有几种方法,下面介绍3种. ① mysql -u -p -e "sql" db > filep ...
- qduoj前端二次开发简略流程
为缩减篇幅,已略去nodejs.git等软件安装操作,若有疑问请搜索相关教程. 为区分win和ubuntu的命令,作如下约定: $ cd //以$标记win下命令 # cd //以#标记linux命令 ...
- Centos7 系统下搭建.NET Core2.0+Nginx+Supervisor+Mysql环境
好记性不如烂笔头! 一.简介 一直以来,微软只对自家平台提供.NET支持,这样等于让这个“理论上”可以跨平台的框架在Linux和macOS上的支持只能由第三方项目提供(比如Mono .NET).直到微 ...
- Git代码管理
持续更新中... 有道笔记链接:http://note.youdao.com/noteshare?id=10a0a86a3499f92cf26371f2698b97d2 Git网上平台 Git ...
- OKR源自德鲁克和格鲁夫,跟谷歌是天作之合:4星|《这就是OKR》
这就是OKR,[美]约翰杜尔(John Doerr),中信出版社,9787508696881 作者以实习生的身份加入英特尔,跟格鲁夫有交集,见证了格鲁夫在英特尔创立OKR的过程和英特尔使用OKR作为管 ...
- Ambari与Kerberos 集成
Kerberos 介绍 Kerberos 是一个网络认证的框架协议,其设计的初衷便是通过密钥系统为 Client 和 Server 应用程序之间提供强大的认证服务.在使用 Kerberos 认证的集群 ...
- 理解IO、NIO、 AIO
转载:https://baijiahao.baidu.com/s?id=1586112410163034993&wfr=spider&for=pc nio 同步: 自己亲自出马持银行卡 ...
- python中的闭包和装饰器
重新学习完了函数,是时候将其中的一些重点重新捋一捋了,本次总结的东西只有闭包和装饰器 1.闭包 闭包是python函数中的一个比较重要功能,一般闭包都是用在装饰器上,一般学完闭包就会去学习装饰器,这俩 ...
- html基础和CSS选择器
一.html简单基础 什么是HTML HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言: HyperText Markup Language HTML 不是一种编程语言,而是一种标 ...
- root用户无法访问Mysql数据库问题的解决
在使用Centos系统远程访问Mysql数据库的时候,系统提示报如下错误: Access Denied for User 'root'@'localhost' (using password: YES ...