Angular.JS中指令的命名规则详解
程序员文章站
2022-06-29 08:37:46
命名规范
同一个angularjs指令,在js文件和html文件中有着不同的命名规范:在js文件中使用标准的小驼峰命名法,在html文件中使用“小写字母+连接符”的命名法...
命名规范
同一个angularjs指令,在js文件和html文件中有着不同的命名规范:在js文件中使用标准的小驼峰命名法,在html文件中使用“小写字母+连接符”的命名法。如下表所示
在js文件中 | 在html文件中 |
---|---|
ngapp | ng-app |
mydirective | my-directive |
处理机制
angularjs之所以选择这样的命名方式,是因为html文件不区分大小写,而js文件则对大小写敏感(mydir和mydir在js文件中是不同的指令,但html看来是同一个指令),为了避免可能出现的错误,所以使用上述命名规范。
angularjs执行过程中,对“小写字母+连接符”形式的命名做如下处理,最终装换成小驼峰命名法:
- 去掉开始部分的x-和data-;
- 第一个单词不变,把连接符后面的单词首字母转换成大写,去掉连接符。
这里有两点需要注意:
- 指令命名时不要以x或data作为第一个单词
- 支持的链接符包括:,-和_,但通常会选择-作为连接符
隔离作用域对象中的属性命名
指令隔离作用域对象中属性命名规则同上,见下面代码:
.directive('mydirective', function() { return { restrict: 'a', scope: { myurl: '@', // 隔离作用域对象中属性命名为小驼峰命名法 mylinktext: '@' }, template: '<a href="{{myurl}}">{{mylinktext}}</a>' })
<div my-directive my-url="http://google.com" <!-- html文件中使用“小写字母+分割符”的命名方式--> my-link-text="click me"> </div>
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。
下一篇: 搞笑图片非主流笑死人