AngularJS指令-復雜指令名稱

Question

我們開始在應該是大型項目中使用AngularJS，並決定使用“模塊化”項目結構和命名約定。 除指令外，一切正常。

我們對角度分量的命名約定如下：
App.Module.Component.Name

因此，當我注冊指令時，它看起來像App.Module.directive("App.Module.Directives.DataViewer",function(){...});

指令的問題在於，現在我不知道如何在DOM中使用它。
當我將指令限制為“ A”並編寫HTML <div App.Module.Directives.DataViewer></div> ，則當瀏覽器對其進行解析時，該屬性為小寫且指令不起作用。

如果我限制“ C”和HTML <div class="App.Module.Directives.DataViewer"></div> ，我不知道為什么，但是該指令仍然不起作用。 我成功使用指令的唯一方法是camelCase或對屬性使用所有小寫字母，或者僅對類使用camelCase。 有什么解決辦法嗎？

由於IE8的兼容性，我們不考慮“ E”指令。

謝謝

Answer 1

大寫字母會自動以駝峰大小寫，以便在HTML中安全使用（HTML不區分大小寫，這可能會引起混淆，因此標准僅對HTML屬性使用小寫字母）（ http://docs.angularjs.org/guide/directive ）。

所以

App.Module.directive("app.Module.Directives.DataViewer",function(){...});

可以像這樣引用：

<div app.-module.-directives.-dataViewer></div>

請注意，我在“ app”中小寫了您的第一個字母

Answer 2

應該考慮為應用的各個部分創建模塊。

您只使用一個模塊初始化頁面，一個模塊匹配ng-app 。 但是，您可以根據需要擁有任意數量的模塊，並將其注入到主要的ng-app模塊中

angular.module('App.Module.Component.Name',[])
/* use camelCase for directives*/
.directive('componentNameDataviewer',function....;

然后在標記中：

<div component-name-dataviewer></div>

然后將模塊注入到主要的ng-app模塊中

var app=angular.module('myApp',['App.Module.Component.Name']);

可能具有僅用於合並注入的模塊，例如僅包含指令的模塊或僅包含過濾器或服務的模塊