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“和<div class="App.Module.Directives.DataViewer"></div>，我不知道为什么，但指令仍然不能工作。成功使用该指令的唯一方法是camelCase或对属性使用所有小写，或仅在类上使用camelCase。有什么解决办法吗？

我们没有考虑"E“指令，因为IE8兼容。

谢谢

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']);

可能拥有的模块的唯一目的是合并注入，例如只包含指令的模块，或者只包含过滤器或服务的模块