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”字体是什么颜色？
黄色应该是比较合理的颜色吧？红色也说得过去，毕竟最后一次没改么！ 然而，事实上是系统默认色（黑色），因为被抹杀了 :(

不理解源代码出于什么考虑，按我理解，应该按照下面两个方案之一来实现：

  1. 初始化时，备份用户自定义style。监视表达式，变化，恢复用户自定义style，然后再用新定义的style覆盖。上例中，字体颜色应该为黄色。
  2. 不做抹杀处理，直接进行style覆盖。

回避方案，表达式中css 属性清单始终保持一致。

有人可能会问为啥用了ng-style还要用style属性？

答：ng-style设置是为了减少页面初始化后到angularjs处理阶段页面闪烁的问题。

Angular.js指令的更多相关文章

  1. angular js 指令的数据传递 及作用域数据绑定

    <div my-directive my-url="http://google.com" my-link-text="Click me to go to Googl ...

  2. 推荐 15 个 Angular.js 应用扩展指令(参考应用)

    几天前我们看到Angular 1.4.0发布了-一个以社团为驱动的发布版本涵盖了400多个GitHub的提交,增加了对特性的提升,比如动画,以及可用性. 官方新闻发布稿 覆盖了绝大部分,这同样值得放于 ...

  3. Angular JS 中 指令详解

    Angular JS的强大功能就在于其可以自定义很多指令,现在就指令做一下详细的剖析. 一个Angular js 指令(directive)需要指定一个唯一的名字(myDirective)和一个函数, ...

  4. angular.js 中的作用域 数据模型 控制器

    1.angular.js 作为后起之秀的前端mvc框架,他于传统的前端框架都不同,我们再也不需要在html中嵌入脚本来操作对象了.它抽象出了数据模型,控制器及视图. 成功解耦了应用逻辑,数据模型,视图 ...

  5. angular.js ng-repeat动态插入删除dom节点

    既然上面提到 angular.js 下无需用户直接操作dom ,而是在编译间断 dom 与 控制层model 实现了双向绑定,一方做出改变,另一方就会立即改变,那问题来了,我想插入一个文本框和按钮,并 ...

  6. angular.js 动态插入删除dom节点

    angular.js 是新一代web开发框架,它轻松在web前端实现了MVC模式,相比 jquery 模式,这种新玩意竟然不需要开发者直接去操作dom . 作为前端开发而不去操作dom ,这简直是一个 ...

  7. Angular JS学习之指令

    1.Angular JS通过称为指令的新属性来扩展HTML:通过内置的指令来为应用添加功能: 2.AngularJS指令:AngularJS指令是扩展的HTML属性,带有前缀ng-: **ng-app ...

  8. Angular JS 学习笔记(自定义服务：factory，Promise 模式异步请求查询:$http,过滤器用法filter，指令:directive)

    刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...

  9. Angular.js之自定义指令学习笔记

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. [jzoj]4216.【NOIP2015模拟9.12】平方和

    Link https://jzoj.net/senior/#main/show/4216 Description 给出一个N个整数构成的序列,有M次操作,每次操作有一下三种: ①Insert Y X, ...

  2. VS2008中 VB 报错 检索 COM 类工厂中 CLSID 为 {28E68F9A-8D75-11D1-8DC3-3C302A000000} 的组件失败，原因是出现以下错误: 80040154 没有注册类 (异常来自 HRESULT:0x80040154 (REGDB_E_CLASSNOTREG))。

    Resvr32 .net中引用控件的名称 如果注册成功,问题不在出现 但是如果是在x64位的系统中,即使控件注册成功,错误依照提示,是因为大多数第三方写的COM控件,只支持32位的系统, 在VS中找到 ...

  3. 经过N条边的最短路

    http://acm.pku.edu.cn/JudgeOnline/problem?id=3613 求经过N条边的最短路 (2 ≤ N ≤ 1,000,000) 倍增floyd,主体是矩阵乘法.考虑一 ...

  4. 熟悉Linux常用命令

    cd命令:切换目录 (1)切换到目录 /usr/localcd / usrcd / local (2)去到目前的上层目录cd .. (3)回到自己的主文件夹cd ls命令:查看文件与目录 (4)查看目 ...

  5. 壁虎书6 Decision Trees

    Decision Trees are versatile Machine Learning algorithms that can perform both classification and re ...

  6. js_js流程控制

    1.表达式.语句 2.流程控制 顺序   分支   循环 分支   循环结构都有一个条件 循环结构:重复做一件事 3元运算符 switch语句(用来做相等性判断--优先考虑) 注意: 1.switch ...

  7. XP下ubuntu双系统安装方法

    利用u盘将iso刻录 从u盘启动 连续按alt+f2 进入ubuntu试用 打开终端 输入 sudo umount -l /cdrom sudo umount -l /isodevice 然后安装un ...

  8. Sybase IQ 的基础

    Sybase IQ 的基础   Sybase IQ的一些基础总结: 1.IQ跟其它的关系型数据库相比,它的主要特征是:查询快.数据压缩比高.Load快,但是插入更新慢,不太适应数据老是变化,它是按列存 ...

  9. 《Zero MQ》

    原文链接 http://www.aosabook.org/en/zeromq.html ZeroMQ ZeroMQ 是一个消息系统,或者‘面向消息的中间件’.广泛应用于金融服务,游戏开发,嵌入式系统, ...

  10. 定位属性position

    定位属性position小结 1.元素为fixed(固定的),则是固定定位,即使是子元素,也不参考父元素的位置,即以浏览器作为参考定位.相当于电脑屏幕的一只蚂蚁,你无论怎么滑动屏幕,还是在原来的位置. ...