好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

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 >

总结

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

原文链接:http://xiaogliu.github.io/2017/04/15/AngularJS命名规则/

查看更多关于Angular.JS中指令的命名规则详解的详细内容...

  阅读:46次