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 ...
随机推荐
- Dynamics 365 Customer Engagement V9 活动源功能报错的解决方法
微软动态CRM专家罗勇 ,回复300或者20190120可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . 安装好Dynamic ...
- SpringBoot集成mybatis配置
一个有趣的现象:传统企业大都喜欢使用hibernate,互联网行业通常使用mybatis:之所以出现这个问题感觉与对应的业务有关,比方说,互联网的业务更加的复杂,更加需要进行灵活性的处理,所以myba ...
- 仿9GAG制作过程(五)
有话要说: 在做完了数据展示功能之后,就想着完善整个APP.发现现在后台非常的混乱,有好多点都不具备,比方说:图片应该有略缩图和原图,段子.评论.点赞应该联动起来,段子应该有创建时间等. 于是就重新设 ...
- python实现有序字典
对于一个能够保存键值插入顺序的字典,是如何实现的? 主要有两点: 一个双向链表,用来记录字典的键值的插入顺序 一个键和链表节点的映射,主要用来删除键的时候,找到键对应的节点 python代码实现 cl ...
- cmd实现批量文件的base64加密并双击加密文件后正常运行
之前,一个朋友让我用cmd做个简单的文档加密(base64),对于不太懂电脑的人来说看不懂就行.但是当那个人点击加密后的文件可以正常运行,问咋写? 其实,像这种要求不高的加密来说,随便下载个加密软件就 ...
- SQLServer之函数简介
用户定义函数定义 与编程语言中的函数类似,SQL Server 用户定义函数是接受参数.执行操作(例如复杂计算)并将操作结果以值的形式返回的例程. 返回值可以是单个标量值或结果集. 用户定义函数准则 ...
- go语言打造个人博客系统(二)
go语言打造个人博客系统(二) 在上篇文章go语言打造个人博客系统(一)中,我们了解了go语言的优点和go语言的数据库操作,本次我们会完成博客系统的后端开发. 博客系统后端接口开发 路由测试 ht ...
- JavaScript(二)数据类型(二)
布尔值布尔值指真或假,开或关,是或否,关键字true和false.下面这些值会被转换成false: undefined null 0 -0 NaN "" // 空字符串 布 ...
- Python运算符之翩若惊鸿,婉若游龙
python中的运算符算术运算符:主要用于两个对象算数计算(加减乘除等运算)比较运算符:用于两个对象比较(判断是否相等.大于等运算)赋值运算符:用于对象的赋值,将运算符右边的值(或计算结果)赋给运算符 ...
- 【原】Java学习笔记025 - 内部类
package cn.temptation; public class Sample01 { public static void main(String[] args) { // 内部类(嵌套类): ...