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 ...
随机推荐
- JavaScript 的 4 种数组遍历方法: for VS forEach() VS for/in VS for/of
我们有多种方法来遍历 JavaScript 的数组或者对象,而它们之间的区别非常让人疑惑.Airbnb 编码风格禁止使用 for/in 与 for/of,你知道为什么吗? 这篇文章将详细介绍以下 4 ...
- Linux设备驱动之IIO子系统——Triggered buffer support触发缓冲支持
Triggered buffer support触发缓冲支持 在许多数据分析应用中,能够基于某些外部信号(触发器)捕获数据是比较有用的. 这些触发器可能是: 数据就绪信号 连接到某个外部系统的IRQ线 ...
- MockJS和Easy Mock使用
之前做mock数据一直用的json-server,今天同事给我推荐了很好用的工具:Easy Mock,我看完之后是下图的状态 很得劲啊,感觉人生已经达到了高潮 既能伪造接口,又能根据既定的规则生成对应 ...
- 通过Excel文件快速创建页面和数据表
在设计一个软件系统,构建过程:需求->数据表->系统开发.实际情况是需求(数据)很多来源于已经存在的文件中,客户会要求把这些数据“电子化”,这就给需求分析产生了很大的工作量: 分析这些原始 ...
- TortoiseSVN 安装时出现 please install the universal crt
解决步骤: 1.打开 https://www.microsoft.com/zh-cn/ 2.搜索 universal crt (hotfix kb2999226) 3.点击链接 4.选择适合自己的版本 ...
- oracle 10g函数大全--日期型函数
sysdate [功能]:返回当前日期. [参数]:没有参数,没有括号 [返回]:日期 [示例]select sysdate hz from dual; 返回:2008-11-5 add_months ...
- 【原】Java学习笔记017 - 面向对象
package cn.temptation; public class Sample01 { public static void main(String[] args) { // 继承关系中的pri ...
- 文件操作命令(rename)
Rename 命令: // 描述: 重命名文件或目录. // 语法: rename [<Drive>:][<Path>]<FileName1> <FileNa ...
- spark-2.4.0-hadoop2.7-安装部署
1. 主机规划 主机名称 IP地址 操作系统 部署软件 运行进程 备注 mini01 172.16.1.11[内网] 10.0.0.11 [外网] CentOS 7.5 Jdk-8.zookeepe ...
- JDBC获得连接时报connection refused
1,检查数据库服务器的IP是否正确. 2,检查用户名密码是否正确. 3,检查SID,获selecte instance_name from v$instance;