当前位置：首页 > 资讯 > 技术文档

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

时间：2021-01-16 12:54 编辑：来源：阅读：
扫一扫，手机访问

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

[b]命名规范[/b] 同一个AngularJS指令，在js文件和html文件中有着不同的命名规范：在js文件中使用标准的小驼峰命名法，在html文件中使用“小写字母+连接符”的命名法。如下表所示

在js文件中	在html文件中
ngApp	ng-app
myDirective	my-directive

[b]处理机制[/b] AngularJS之所以选择这样的命名方式，是因为html文件不区分大小写，而js文件则对大小写敏感（myDir和mydir在js文件中是不同的指令，但html看来是同一个指令），为了避免可能出现的错误，所以使用上述命名规范。 AngularJS执行过程中，对“小写字母+连接符”形式的命名做如下处理，最终装换成小驼峰命名法： [list] [*]去掉开始部分的x-和data-;[/*] [*]第一个单词不变，把连接符后面的单词首字母转换成大写，去掉连接符。 [/*] [/list] [b]这里有两点需要注意：[/b] [list] [*]指令命名时不要以x或data作为第一个单词[/*] [*]支持的链接符包括:,-和_，但通常会选择-作为连接符 [/*] [/list] [b]隔离作用域对象中的属性命名[/b] 指令隔离作用域对象中属性命名规则同上，见下面代码：

.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>

[b]总结[/b] 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程素材网的支持。

全部评论(0)

上一篇：Linux crontab定时任务配置方法(详解)
下一篇：vim的一些常用简单操作小结

资讯排行榜
更多>>