AngularJS指令中被误解的部分

Question

我在JSFiddle找到了一个angularJS thi代码。有两个名为uiFoo和uiBar的指令。当我比较这两个指令时，我找不到区别。但是，当我运行代码时，带有指令uiFoo的div在html输出上没有区别。

ui-foo div最初是：

<div ui-foo>I should change iamfoo</div>

运行代码时，结果（输出html）也是

I should change iamfoo

ui-bar div最初是：

<div ui-bar>I should change iambar</div>

然而，当代码运行时，result（输出html）是

iambar

是什么让这个与众不同？我错过了什么？

非常感谢...：D

Answer 1

你的第二个模块定义是覆盖你的第一个。因此，在覆盖之后，不再定义第一个指令。

要解决此问题，只需使用uiBar的模块方法，而不使用第二个参数：

 angular.module('ui.directives').directive('uiBar', function() { ... });

Answer 2

那是因为指令模块被定义了两次。

angular.module('ui.directives', [])定义了模块 angular.module('ui.directives')使用模块

http://jsfiddle.net/A8Vgk/587/

Answer 3

原始指令被破坏，第一个没有被调用，因为第二个是由于重新定义模块而覆盖它。

请参阅此fiddle。

当您重用相同的模块时，您应该只传递一次依赖项，如下所示：

angular.module('my.module', []);
angular.module('my.module').directive(...);
angular.module('my.module').directive(...);