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" ...
随机推荐
- CentOS裸机环境下安装php-7.3.1
安装步骤如下 安装必要的软件 获取源码 编译安装 安装过程可能遇到的一些问题 编译参数详解 安装步骤如下 安装必要的软件 yum install -y autoconf automake libtoo ...
- 常用的当前时间(返回String类型)
public class TimeUtil { /** * 创建人:zhiyuan * 创建时间:2018年6月9日上午11:31:02 * 方法描述:以yyyy-MM-dd查询当前时间 */ pub ...
- 甘特图dhtmlx Gantt入门
(以下截图来自别人的博客,来源地址已经忘记了,若后期找到会补充上来!) API地址:https://docs.dhtmlx.com/gantt/desktop__guides.html,这是英文的网页 ...
- Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
运行代码时,一直报错: 经过查询后才知道,vue模板只能有一个跟对象 我是这样写的 最后修改为 就可以正常运行了
- 新装的centos怎样显示中文界面
默认的显示英文界面,即使各种配置中都选择的chinese也没用,默认显示的还是英文. 要在终端输入 vim ~/.bashrc 编辑本用户配置文件 打开后最后一行加入 export LANG=&quo ...
- 邮件服务器安装--Postfix + Dovecot + Squirrelmail--CentOS 6.4
英文原文链接 : http://www.unixmen.com/install-postfix-mail-server-with-dovecot-and-squirrelmail-on-centos- ...
- VUE错误码Attribute ':sizeOpts' must be hyphenated
Attribute ':sizeOpts' must be hyphenated 因为属性有大写,需要添加 - 来取代 例如 tampData 换成 tamp-data 就可以了
- 可扩展的Web架构和分布式系统
原文链接:http://www.aosabook.org/en/distsys.html 开源软件已经成为一些大型网站的基石.随着这些网站的发展,围绕其架构的最佳实践和指导原则应运而生.本章旨在讨论设 ...
- TypeScript初探
TypeScript初探 TypeScript什么? 官方给的定义:TypeScript是一种由微软开发的自由和开源的编程语言,它是JavaScript类型的超集,可以编译成纯JavaScript,本 ...
- Linux 磁盘介绍(磁盘、分区、MBR、GPT)
原文:https://www.linuxidc.com/Linux/2013-06/85717.htm 1. CHS(Cylinder-Head-Sector): was an early metho ...