角度元件標籤名稱格

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元素是很乾淨和很好的做法。你應該學會喜歡它。