角度元件标签名称格

Question

我完全不希望在我的应用程序中添加基于组件名称的标签名称。我讨厌这样做：

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

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

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

为什么不工作？

Answer 1

你的答案就在这里https://docs.angularjs.org/guide/directive

他们说：

指令类型$编译可以根据元素名称， 属性，类名，以及意见一致的指令。

所有Angular提供的指令都匹配属性名称，标记名称，注释或类名称 。下面演示了一个 模板内的 指令（在这种情况下MYDIR）可以从被引用的各种方式：

<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作为 这个问题的更好的解决方案。鼓励开发人员在可能的情况下使用此自定义 注释指令。

Answer 2

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

但同时创建该指令可以指定

restriction : AE 

或世袭的需要，

，那么你可以使用这样

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

更多深入了解文档。 directives

Answer 3

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

编辑：这对旧版本1.5版本可以工作，但不适用于新版本。所以请继续阅读...

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

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