MyException - 我的异常网
当前位置:我的异常网» Google技术 » Angular开发者手册着重点翻译之指令(一)

Angular开发者手册着重点翻译之指令(一)

www.MyException.Cn  网友分享于:2014-12-30  浏览:0次
Angular开发者手册重点翻译之指令(一)

创建自定义的指令

这个文章将解释什么需要在自己的angularjs应用中创建自己的指令,以及如何实现它。

什么是指令

在高的层面上讲,指令是DOM元素中的标记(例如一个属性,一个节点名,注释或者CSS类),它告诉angularjs编译器去给这个元素附加一个指令的行为或者转换DOM元素和它的子元素。

Angularjs拥有一些内建的指令,像ngBind、ngModel和ngClass。非常类似于你创建自己的controller和service,你可以创建你自己的指令个angularjs使用,党angular初始化启动你的应用程序,html编译器将遍历你的DOM元素并且去匹配指令。

匹配指令

在你可以编写指令之前,你需要知道当你使用一个给定的指令的时候,angularjs的html编译器是怎样工作的.

在下面的例子里,我们说<input>元素匹配了ngModel指令:

<input&nbsp;ng-model="foo">

下面的例子也同样匹配ngModel指令:
<input&nbsp;data-ng:model="foo">

Angular规范是一个元素标签和属性名去决定哪个元素匹配哪个指令,我们通常使用大小写敏感的驼峰式规范化命名应用指令。可是因为HTML是大小写不敏感的,所以我们在DOM中使用小写的方式去引用指令,通常在DOM元素上使用短划线分隔的属性。

规范化的形式如下所示:

1:去除元素或者属性以x-和data-的开头。

2:使用:/_/-分隔驼峰式的命名。

例如,以下的格式都是等价的并且匹配ngBind指令:

<div&nbsp;ng-controller="Controller">
  Hello <input&nbsp;ng-model='name'> <hr/>
  <span&nbsp;ng-bind="name"></span> <br/>
  <span&nbsp;ng:bind="name"></span> <br/>
  <span&nbsp;ng_bind="name"></span> <br/>
  <span&nbsp;data-ng-bind="name"></span> <br/>
  <span&nbsp;x-ng-bind="name"></span> <br/>
</div>

最佳实践:推荐使用短划线间隔的格式(比如ngBind指令使用ng-bind),假如你想使用一个HTML验证工具,你可以换为使用data-前缀的样式(比如ngBind指令使用data-ng-bind)。其他的样式,在一些遗留的因素上也是可接受的,但是我们建议你避免使用它们

所有Angular提供的指令匹配属性名、标签名、注释或者类名,下面演示了一个指令可以被引用的几种方式:

<my-dir></my-dir>
<span&nbsp;my-dir="exp"></span>
<!-- directive: my-dir exp -->
<span&nbsp;class="my-dir: exp;"></span>

最佳实践:对比注释和类型,我们更多的倾向于使用标签名和属性,这样可以更容易地确定哪个指令是元素需要去匹配的。

最佳实践:注释形的指令通常用于DOM API不可以跨越多个元素去创建指令的限制(比如在table元素内部),AngularJS 1.2加入了ng-repeat-start和ng-repeat-end作为这个问题的一个更好的解决方案,开发人员被鼓励使用这种方式来替换注释形的指令。

文本和属性绑定

在编译工作阶段,编译器使用$interpolate服务匹配文本和属性,它将发现他们是否包含嵌入的表达式。这些表达式将被注册为watchs,并且作为一个通常的生命周期的一部分被更新,下面是一个interpolation的示例:

<a&nbsp;ng-href="img/{{username}}.jpg">Hello {{username}}!</a>

ngAttr属性绑定

浏览器对属性是否合法经常是挑刺的,例如,考虑一下这个例子:

<svg>
  <circle&nbsp;cx="{{cx}}"></circle>
</svg>

我们期望Angular可以去绑定它,但是当我们查看控制台,我们将会看到一些这样的信息

Error: Invalid value for attribute cx="{{cx}}"

因为SVG DOM API是严谨话的,你不可以简单的写cx="{{cx}}"这样的属性。但是你可以使用ng-attr-cx来绕过这个问题,加入有一个拥有绑定的属性是拥有ngAttr前缀的,在绑定阶段,它将会被应用到相应的无前缀的属性上,这样就允许你去绑定你想要的属性,否则你只能看着它被浏览器处理掉,当使用ngAttr的时候,$interpolate的allOrNothing标识被使用,所以假如任何表达式返回的是undefined,这个属性将会被移除而不是添加到元素上。例如,我们可以像这样修复上文中的问题

<svg>
  <circle&nbsp;ng-attr-cx="{{cx}}"></circle>
</svg>

假如想要去使用一个驼峰式属性名,像viewBox,可以使用下划线去指示属性去绑定到一个实际的驼峰属性上。例如下文中绑定一个viewBox,我们可以这样写:

<svg&nbsp;ng-attr-view_box="{{viewBox}}">
</svg>

创建指令

首先让我们谈谈注册指令的API,与controller相似,指令是注册在module上的,想要注册它,你可以使用module.directive   API,module.directive需要一个规范化的指令名跟随着一个工厂方法,这个工厂方法需要返回一个包含不同选项来告诉$compile指令在被匹配的时候应该怎样去表现的对象。

这个工厂方法只会被在编译器匹配到指令的第一次的时候调用一次,你可以在这个时机执行任何的初始化工作,这个方法需要被$compile.invoke调用使得它可以像controller一样是可注入的。

最佳实践:推荐使用定义对象而不是返回一个方法。

我们将会使用一些指令的通常示例,然后进行深入的探讨不同的选项和编译过程。

最佳实践:为了避免与将来的标准冲突,最好为你自己的指令加一个前缀,比如,加入你想创建一个carousel指令,如果HTML7包含了一个这样的元素,这就会有问题了,两个或者三个字母的前缀就会使它工作的很好,同样的,不要给自己的指令加上ng或者可能会和未来版本的angular引起冲突的前缀。

 

 

未完待续…

文章评论

什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
一个程序员的时间管理
一个程序员的时间管理
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
漫画:程序员的工作
漫画:程序员的工作
我是如何打败拖延症的
我是如何打败拖延症的
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
鲜为人知的编程真相
鲜为人知的编程真相
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
如何成为一名黑客
如何成为一名黑客
程序员都该阅读的书
程序员都该阅读的书
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
10个调试和排错的小建议
10个调试和排错的小建议
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
中美印日四国程序员比较
中美印日四国程序员比较
Java程序员必看电影
Java程序员必看电影
为什么程序员都是夜猫子
为什么程序员都是夜猫子
总结2014中国互联网十大段子
总结2014中国互联网十大段子
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
代码女神横空出世
代码女神横空出世
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
我的丈夫是个程序员
我的丈夫是个程序员
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
每天工作4小时的程序员
每天工作4小时的程序员
 程序员的样子
程序员的样子
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
程序员应该关注的一些事儿
程序员应该关注的一些事儿
程序员必看的十大电影
程序员必看的十大电影
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
程序员和编码员之间的区别
程序员和编码员之间的区别
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
旅行,写作,编程
旅行,写作,编程
编程语言是女人
编程语言是女人
程序员的鄙视链
程序员的鄙视链
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有