angular代码规范_Angular.JS中指令的命名规则详解

本文详细介绍了AngularJS中指令的命名规范,强调了在JavaScript文件中使用小驼峰命名法,在HTML文件中使用小写字母加连接符的规则。由于HTML不区分大小写,AngularJS会将连接符形式的命名转换为小驼峰命名,以避免大小写引起的错误。同时,文章提及了指令的隔离作用域和属性命名,以及在HTML中如何使用这些指令。
摘要由CSDN通过智能技术生成

命名规范

同一个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: '{{myLinkText}}'

})

my-url="http://google.com"

my-link-text="Click me">

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值