Angular.JS中指令的命名规则详解

这篇文章主要给大家介绍了关于Angular.JS中指令命名规则的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。

命名规范

同一个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>