AngularJS学习之指令命名规则详解

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AngularJS学习之指令命名规则详解相关的知识,希望对你有一定的参考价值。

本文和大家分享的主要是AngularJS指令命名规则相关内容,一起来看看吧,希望对大家学习AngularJS有所帮助。
同一个AngularJS指令,在js文件和html文件中有着不同的命名规范:在js文件中使用标准的 小驼峰命名法 ,在html文件中使用小写字母+连接符 ”的命名法。如下表所示
js文件中在html文件中
ngAppng-app
myDirectivemy-directive
处理机制
AngularJS之所以选择这样的命名方式,是因为html文件不区分大小写,而js文件则对大小写敏感( myDir  mydirjs文件中是不同的指令,但html看来是同一个指令),为了避免可能出现的错误,所以使用上述命名规范。
AngularJS执行过程中,对“ 小写字母+连接符 ”形式的命名做如下处理,最终装换成 小驼峰命名法 
1. 去掉开始部分的 x-  data- ;
2. 第一个单词不变,把连接符后面的单词首字母转换成大写,去掉连接符。
这里有两点需要 注意 
· 指令命名时不要以  data 作为第一个单词
· 支持的链接符包括 : , -  _ ,但通常会选择 - 作为连接符
隔离作用域对象中的属性命名
指令隔离作用域对象中属性命名规则同上,见下面代码:
.directive(’myDirective’, function(){
return {
restrict: ’A’,
scope: {
myUrl: ’@’, // 隔离作用域对象中属性命名为小驼峰命名法
myLinkText: ’@’
},
template: ’{{myLinkText}}
})
<div my-directive
my-url="http://google.com" <!-- html文件中使用“小写字母+分割符”的命名方式-->
my-link-text="Click me"
></div>

来源:Vince

以上是关于AngularJS学习之指令命名规则详解的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS学习之compile与link函数详解

Linux学习之软件包管理--rpm命令管理

标准ACL扩展ACL和命名ACL的配置详解

小白学习之Code First

AngularJS中的指令

详解python的命名规则