命名規范
同一個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作為第一個單詞
- 支持的鏈接符包括:,-和_，但通常會選擇-作為連接符
隔離作用域對象中的屬性命名
指令隔離作用域對象中屬性命名規則同上，見下面代碼：
|
1
2
3
4
5
6
7
8
9
|
.directive('myDirective', function() { return { restrict: 'A', scope: { myUrl: '@', // 隔離作用域對象中屬性命名為小駝峰命名法 myLinkText: '@' }, template: '<a href="{{myUrl}}">{{myLinkText}}</a>'}) |
|
1
2
3
4
|
<div my-directive my-url="http://google.com" <!-- html文件中使用“小寫字母+分割符”的命名方式--> my-link-text="Click me"></div> |
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對服務器之家的支持。
原文鏈接：http://xiaogliu.github.io/2017/04/15/AngularJS命名規則/
