Angular.js指令
ng-style
<input type="button" value="set color" ng-click="myStyle={color:'red'}">
<input type="button" value="set background" ng-click="myStyle={'background-color':'blue', color: 'black'}">
<span ng-style="myStyle">Sample Text</span>
ps:ng-style指定的表达式必须是个单层的json对象，key和value对应css属性的名称和值。注意如果css属性名中有“-”连接符，需要用引号括起来。
工作原理:
ng-style代码比较简单，调用jquery.css方法，将上次设置的css属性移除（why？），添加新的css属性。
ngstyle的核心代码：
scope.$watch(attr.ngStyle, function ngStyleWatchAction(newStyles, oldStyles) {
if (oldStyles && (newStyles !== oldStyles)) {
forEach(oldStyles, function(val, style) { element.css(style, '');});
}
if (newStyles) element.css(newStyles);
}, true);
遗留问题:
ng-style代码比较简单，所以就带来了一些问题。ng-style监听的表达式变更的时候，把上次设置的style给清除，却没有恢复上次设置前的值，所以就有可能会把之前的style值给清除掉。
1 <body ng-app="" class="ng-scope">
2 <input type="button" value="变更字体颜色" ng-click="myStyle={color:'red'}">
3 <input type="button" value="变更背景颜色" ng-click="myStyle={'background-color':'blue'}">
4 <input type="button" value="clear" ng-click="myStyle={}">
5 <br>
6 <span ng-style="myStyle" style="color: yellow;">Sample Text</span>
7 <pre class="ng-binding">myStyle={}</pre>
8
9 </body>
上述代码，“Sample Text”显示成黄色，点击“变更字体颜色”以及“变更背景颜色”后，猜猜“Sample Text”字体是什么颜色？
黄色应该是比较合理的颜色吧？红色也说得过去，毕竟最后一次没改么！ 然而，事实上是系统默认色（黑色），因为被抹杀了 :(
不理解源代码出于什么考虑，按我理解，应该按照下面两个方案之一来实现：
- 初始化时，备份用户自定义style。监视表达式，变化，恢复用户自定义style，然后再用新定义的style覆盖。上例中，字体颜色应该为黄色。
- 不做抹杀处理，直接进行style覆盖。
回避方案，表达式中css 属性清单始终保持一致。
有人可能会问为啥用了ng-style还要用style属性？
答：ng-style设置是为了减少页面初始化后到angularjs处理阶段页面闪烁的问题。
Angular.js指令的更多相关文章
- angular js 指令的数据传递 及作用域数据绑定
<div my-directive my-url="http://google.com" my-link-text="Click me to go to Googl ...
- 推荐 15 个 Angular.js 应用扩展指令(参考应用)
几天前我们看到Angular 1.4.0发布了-一个以社团为驱动的发布版本涵盖了400多个GitHub的提交,增加了对特性的提升,比如动画,以及可用性. 官方新闻发布稿 覆盖了绝大部分,这同样值得放于 ...
- Angular JS 中 指令详解
Angular JS的强大功能就在于其可以自定义很多指令,现在就指令做一下详细的剖析. 一个Angular js 指令(directive)需要指定一个唯一的名字(myDirective)和一个函数, ...
- angular.js 中的作用域 数据模型 控制器
1.angular.js 作为后起之秀的前端mvc框架,他于传统的前端框架都不同,我们再也不需要在html中嵌入脚本来操作对象了.它抽象出了数据模型,控制器及视图. 成功解耦了应用逻辑,数据模型,视图 ...
- angular.js ng-repeat动态插入删除dom节点
既然上面提到 angular.js 下无需用户直接操作dom ,而是在编译间断 dom 与 控制层model 实现了双向绑定,一方做出改变,另一方就会立即改变,那问题来了,我想插入一个文本框和按钮,并 ...
- angular.js 动态插入删除dom节点
angular.js 是新一代web开发框架,它轻松在web前端实现了MVC模式,相比 jquery 模式,这种新玩意竟然不需要开发者直接去操作dom . 作为前端开发而不去操作dom ,这简直是一个 ...
- Angular JS学习之指令
1.Angular JS通过称为指令的新属性来扩展HTML:通过内置的指令来为应用添加功能: 2.AngularJS指令:AngularJS指令是扩展的HTML属性,带有前缀ng-: **ng-app ...
- Angular JS 学习笔记(自定义服务：factory，Promise 模式异步请求查询:$http,过滤器用法filter，指令:directive)
刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...
- Angular.js之自定义指令学习笔记
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
随机推荐
- BOM 浏览器对象模型_window.navigator
window.navigator 对象 包含浏览器和系统信息的 Navigator 对象. 通过这个属性 了解用户的环境信息 window.navigator.userAgent 返回浏览器的 Use ...
- 微信公众号_订阅号_微信JS-SDK网页开发
微信JS-SDK( 分享接口很常用 ) 是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包 借助微信高效使用相机.语音.选题.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.支付等 ...
- swust oj 983
利用二叉树中序及后序遍历确定该二叉树的先序序列 1000(ms) 10000(kb) 2606 / 4908 已知二叉树的中序和先序遍历可以唯一确定后序遍历.已知中序和后序遍历可以唯一确定先序遍历,但 ...
- Python练手例子（2）
7.将一个列表的数据复制到另一个列表中. 程序分析:使用列表[:]. #python3.7 #适用于简单列表(即列表中都是基本的元素) a1 = [1,2] b1 = a1[:] print(b1) ...
- CodeForces #549 Div.2 D. The Beatles
题目 解题思路 关键是要 ,找出L 的组合,然后遍历L的组合,用最大公约数就可以算出来当前L的值要停多少次 怎么找出L的组合呢?饭店是每隔K 有一个,是重复的,我们只需要算出第一个饭店两侧,起点和停顿 ...
- COCI 2018/2019 CONTEST #2 T4 Maja T5Sunčanje Solution
COCI 2018/2019 CONTEST #2 T4 T5 Solution abstract 花式暴力 #2 T5 Sunčanje 题意 按顺序给你1e5个长方形(左下角坐标&& ...
- python3 参数*args 、 **args 在函数定义和调用中的应用
一.函数调用时 说明:*args 表示解包(解包 列表.元组.字符串类型) #定义函数cn_musql def cn_musql(host,port,user,pwd,db): print(host) ...
- ps去掉图片上的文字
使用仿制图章工具去除文字这是比较常用的方法,具体的操作是,选取仿制图章工具,按住Alt键,在无文字区域点击相似的色彩名图案采样,然后在文字区域拖动鼠标复制以覆盖文字.要注意的是,采样点即为复制的起始点 ...
- 关于Android布局优化的代码使用
1. include标签: include标签的作用是在一个布局文件中导入另一个布局文件.在开发中经常会有多个页面同时拥有一部分相同的布局,这个时候如果每个布局都把那个部分的代码写一遍就会使得代码重 ...
- python基础2 数据类型、数据拼接、数据转换
一.数据类型 1.字符串 字符串英文string,简写str,只要是被[单/双/三引号]这层皮括起来的内容,不论那个内容是中文.英文.数字甚至火星文.只要是被括起来的,就表示是字符串类型 如:prin ...