极乐门资源网

Angular.JS中指令的命名规则详解
服务器 2024/12/25 佚名
2 0
极乐门资源网 Design By www.ioogu.com

命名规范

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

总结

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

标签：
angular2,命名规则,angularjs,指令,angularjs,指令详解
极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
极乐门资源网 Design By www.ioogu.com

评论“Angular.JS中指令的命名规则详解”

暂无Angular.JS中指令的命名规则详解的评论...
www.ioogu.com 极乐门资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
极乐门资源网 Design By www.ioogu.com