Question

我完全不想在我的应用中根据组件名称添加标签名称。我讨厌这样做：

<hero-detail hero="ctrl.hero"></hero-detail>

是不是可以使用普通的div标签？像这样的东西？

<div id="hero-detail" data-hero="ctrl.hero"></div>

为什么这不起作用？

Answer 1

为什么不呢，这也是可能的。基本上我们可以通过三种方式指定指令。即Element，Attribute，Classname

但是在创建指令时，您可以指定

restriction : AE

或者你需要什么，

那么你可以像这样使用

<div id="hero-detail" hero-detail data-hero="ctrl.hero"></div>

更多深入了解文档。 directives

Answer 2

You can technically将组件限制为属性，就像使用指令一样，因为组件是一种特殊的指令。（我修改了谷歌上发现的随机小提琴）

编辑：这适用于较旧的1.5版本，但不适用于较新的版本。请继续阅读...

但正式you cannot，你不应该这样做。如果您选择组件架构，则必须遵守规则或事情将很快失控。

将组件作为html元素是干净且良好的做法。你应该学会喜欢它。

Answer 3

你的回答在https://docs.angularjs.org/guide/directive

他们说：

指令类型$ compile可以匹配基于元素名称的指令，   属性，类名以及注释。

所有Angular提供的指令都匹配属性名称，标记名称，   评论或类名。以下演示了各种方法   指令（在本例中为myDir）可以在a中引用   模板：

  <my-dir></my-dir>
    <span my-dir="exp"></span>
    <!-- directive: my-dir exp -->
    <span class="my-dir: exp;"></span>

最佳实践：首选通过标签名称和属性使用指令   评论和班级名称。这样做通常会使它更容易   确定给定元素匹配的指令。

最佳实践：评论指令通常用于其中的地方   DOM API限制了创建跨越指令的能力   多个元素（例如内部元素）。 AngularJS 1.2   引入ng-repeat-start和ng-repeat-end作为更好的解决方案   这个问题。鼓励开发人员使用此优先级   尽可能的评论指令。

div {}的角度组件标签名称

3 个答案: