Angular 指令：我们可以使用“_”而不是“-”来分隔指令中的单词吗答案

【问题标题】：Angular directives: can we use '_' instead of '-' for separating words in directivesAngular 指令：我们可以使用“_”而不是“-”来分隔指令中的单词吗
【发布时间】：2023-03-03 08:51:25
【问题描述】：

这只是一个关于 AngularJS 语法的快速问题。以下这些代码是否等效并且可以互换使用？

<div ng-class="!!navigation.path ? '' : 'dropdown'"></div>

和

<div ng_class="!!navigation.path ? '' : 'dropdown'"></div>

这很重要，因为如果我们使用 HAML 编写 Angular 模板，我可以这样做：

%div{ng_class: "!!navigation.path ? '' : 'dropdown'"}

而不是这个：

%div{"ng-class" => "!!navigation.path ? '' : 'dropdown'"}

【问题讨论】：

您可以想象，对于 Angular 开发人员来说，让您在使用与他们无关的 HTML 速记时节省一些击键并不是真正的“重要”。我个人认为这是 HAML 语法中的一个缺陷，如果它使使用连字符的属性名称成为一件苦差事，因为这是事实上的标准约定。（规范中的data-* 属性也可以解释为某种“官方认可”。）

标签： angularjs haml

【解决方案1】：

在我的脑海中，我会说它们不相等，第二个是无效的。但是，令我惊讶的是，在进行快速测试之后，除了ng-app 指令之外，似乎两者都有效且功能正常。 ThisjsFiddle 说明了这一点。

~~不过，这并没有记录在案。 documentation 说的是：~~

(...) 规范化是必要的，因为所有这些在 Angular 中都被视为等效：
<span ng:bind="a" ng-bind="a" data-ng-bind="a" x-ng-bind="a">

也就是说，我认为如果您坚持使用文档并选择一种官方格式以确保您的代码面向未来，会更安全。

更新

我刚刚在Angular docs 中发现了以下内容：

指令具有驼峰式名称，例如 ngBind。该指令可以是通过将骆驼案例名称翻译成蛇案例来调用特殊字符 :、- 或 _。可选的指令可以是以 x- 或 data- 为前缀，使其符合 HTML 验证器。这里是一些可能的指令名称的列表：ng:bind、ng-bind、 ng_bind、x-ng-bind 和 data-ng-bind。

因此，您似乎可以安全地在指令名称中使用下划线作为单词分隔符——ng-app 除外。

【讨论】：