您的位置：首页 > Web前端 > AngularJS

AngularJS 指令之 ng-style

2015-10-06 16:52 639 查看

用途

ng-style 属性用来设置元素的style属性的css值。

用法

<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>

ng-style指定的表达式必须是个单层的json对象，key和value对应css属性的名称和值。注意如果css属性名中有“-”连接符，需要用引号括起来。

还有一个比较令本人费解的用法，class里面指定：

<ANY class="ng-style: ;"> ... </ANY>

代码里面和doc文档里面，并没有给出详细的用法说明。在class中指定style？ why？老版本的历史遗留？那传递什么值呢，class名还是css style字符串？

工作原理

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);

等下！源代码中，只监视attr.ngStyle？那doc中 “@restrict AC”怎么解释，如何处理class中定义的ng-style？难不成在指令执行前会对class属性做一个统一转换处理？如果是这样那岂不是几乎所有的指令都支持class里面指定！费解，希望随着阅读代码的增加，这些问题能够找到答案。

遗留问题

ng-style代码比较简单，所以就带来了一些问题。ng-style监听的表达式变更的时候，把上次设置的style给清除，却没有恢复上次设置前的值，所以就有可能会把之前的style值给清除掉。

<body ng-app="" class="ng-scope">
<input type="button" value="变更字体颜色" ng-click="myStyle={color:'red'}">
<input type="button" value="变更背景颜色" ng-click="myStyle={'background-color':'blue'}">
<input type="button" value="clear" ng-click="myStyle={}">
<br>
<span ng-style="myStyle" style="color: yellow;">Sample Text</span>
<pre class="ng-binding">myStyle={}</pre>

</body>

上述代码，“Sample Text”显示成黄色，点击“变更字体颜色”以及“变更背景颜色”后，猜猜“Sample Text”字体是什么颜色？
黄色应该是比较合理的颜色吧？红色也说得过去，毕竟最后一次没改么！然而，事实上是系统默认色（黑色），因为被抹杀了 :(

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

初始化时，备份用户自定义style。监视表达式，变化，恢复用户自定义style，然后再用新定义的style覆盖。上例中，字体颜色应该为黄色。

不做抹杀处理，直接进行style覆盖。

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

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航