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. 牛刀小试之用pytorch实现LSTM

    https://www.itcodemonkey.com/article/9008.html 要看一看

  2. 5、faker.js数据模拟

    转载于:https://segmentfault.com/a/1190000008574028 今天发现了一个神器--json-server!在他的帮助下可以在很短的时间内搭建一个Rest API, ...

  3. mysql字符集校对

    常用的两种 utf8_general_ci 按照普通的字母顺序,而且不区分大小写(比如:a B c D)utf8_bin 按照二进制排序(比如:A排在a前面,B D a c) ci是 case ins ...

  4. SQL Server 查询某个字段值在哪张表的哪个字段

    我要查找值为‘WSCOL1525’的字段. declare @cloumns varchar(40)declare @tablename varchar(40)declare @str varchar ...

  5. Jmeter-----参数配置

    参数化配置: 设置为3个线程后,三个用户均能运行

  6. 学习STM32单片机，从菜鸟到牛人就是这样简单（配视频资料）

    我想说,为了学习单片机而去学习单片机的思路不对. 你问,如何系统地入门学习stm32? 本身就是一个错误的问题.假如你会使用8051 , 会写C语言,那么STM32本身并不需要刻意的学习. 你要考虑的 ...

  7. NOIP 2017 解题报告

    ---恢复内容开始--- NOIP 2017 的题真的很难啊,怪不得当年我这个萌新爆零了(当然现在也是萌新)越学越觉得自己什么都不会. 想要成为强者要把这些好题都弄懂弄透 至少现在6道题我都比较陌生 ...

  8. 快速搭建一个直播Demo

    缘由 最近帮朋友看一个直播网站的源码,发现这份直播源码借助 阿里云 .腾讯云这些大公司提供的SDK 可以非常方便的搭建一个直播网站.下面我们来给大家讲解下如何借助 腾讯云 我们搭建一个简易的 直播示例 ...

  9. Trivial File Transfer Protocol (TFTP)

    Assignment 2The Trivial File Transfer Protocol (TFTP) is an Internet software utility fortransferrin ...

  10. 搭建docker私有仓库

    保存镜像的地方成为仓库(registry).目前有2种仓库:公共仓库和私有仓库. 最方便的是使用公共仓库上传和下载镜像,下载不需要注册,上传需要到公共仓库注册.公共仓库网站:https://hub.d ...