角度指令名称:仅允许使用小写字母吗?


76

我的代码:

app.directive('abcabc', function (){ alert('directive');}); // working

app.directive('abcAbc', function (){ alert('directive');}); // not working !
app.directive('abc-abc', function (){ alert('directive');}); // not working !

我做错了吗?还是Angular指令有特殊的命名规则?

Answers:


118

AngularJS试图让所有人开心!

有些人更喜欢使用数据属性,例如data-abc-abc,我想让验证者满意。其他人喜欢使用像这样的名称空间abc:abc,其他人喜欢使用实际的指令名称abcAbc。甚至所有大写ABC_ABC。或扩展属性,例如x-abc-abc

AngularJS标准化了HTML中使用的名称,以尝试涵盖所有这些情况。data-并被x-剥离,其余的都用:-_作为单词边界。这是abcAbc从上述情况开始的,这些情况用于查找JavaScript中声明的指令。

这全部称为属性规范化(美国:属性规范化),可以在AngularJS文档源代码中找到


6
这次真是万分感谢!我将文档阅读为“您可以使用任何一种方法都可以做到”,但是事实并非如此。我很惊讶,到目前为止只有10个投票。
秒杀堆

它还与Web组件的命名空间保持一致:webcomponents.github.io/articles/web-components-best-practices
Rui Nunes

2
我更改了最后一段,以使用美国英语形式的“标准化”一词,而不是英国的“标准化”一词,因为Angular文档使用英语拼写,并且在搜索英国拼写时未返回任何结果。
塞缪尔·内夫

1
当您意识到应该以小写而不是大写字母开头的指令名称时,最令人惊讶的事情就来了。
sazary 2014年

1
@sazary为什么会感到惊讶?它的大小写与Angular中的所有其他JavaScript标识符对齐。
MEMark 2015年

25

您应该在html和camelCase中使用短划线分隔的名称作为指令中的相应名称。

正如您在文档上所读到的:Angular使用带破折号的名称表示属性名称,使用camelCase表示相应的指令名称)

此处:http//docs.angularjs.org/tutorial/step_00


6
这可能是推荐的方法。但我讨厌这样做,因为在所有文件中搜索相应的指令变得更加乏味。特别是对于带有很多单词的指令。
ColacX 2015年

0

好吧,指令名称必须全部使用小写字母,至少在AngularJS 1.4.9版中是这样,否则我得到一个$ inject找不到错误

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.