如何在 AngularJS 中的多个模块之间共享一个指令答案

【问题标题】：How to share a single Directive across multiple modules in AngularJS如何在 AngularJS 中的多个模块之间共享一个指令
【发布时间】：2013-03-03 20:22:25
【问题描述】：

据我所知，AngularJS 是当今最有趣的库之一。我正在慢慢了解 Angular 的力量，我非常喜欢它。我有一些疑问，我希望我能澄清它们。即使经过一些背景工作，我也无法理解它们是如何完成的

例如，我的应用程序中有一个模块，我为它编写了指令，我想向我的应用程序添加更多模块，并且还想重用为另一个模块编写的现有指令。我怎样才能做到这一点。不仅适用于过滤器、配置等的模块。
我可以在模块中定义子模块吗？
如何动态地将控制器添加到元素中，它不应该是静态的，即通过 html 标记 ng-controller。
如果我想在所有模块之间共享一个东西，我该怎么做。例如，我在应用程序的所有模块之外定义了一个变量，我只想在模块内部访问它们。是这样吗可能，我有这个疑问，因为它完全适用于单个作用域、共享作用域和 rootScope 等。

任何帮助将不胜感激。

【问题讨论】：

注意'标记'答案之一:)
@Shreyas 谢谢。我忘了:)

标签： javascript angularjs

【解决方案1】：

问：例如，我的应用程序中有一个模块，并且我编写了指令为此，我想在我的应用程序中添加更多模块，并且还想重用为另一个模块编写的现有指令。我怎么能实现这一目标。不仅适用于过滤器、配置等的模块。

当你声明一个模块时，你指定了它的依赖。所以如果你有这样的指令：

angular.module( 'moduleA', [] )

.directive( 'myDirective', function () {
  // ...
});

您可以从另一个模块中要求该模块：

angular.module( 'moduleB', [ 'moduleA' ] );

angular.module 的数组参数是一个依赖列表。

问：我可以在模块中定义子模块吗？

模块在技术上都是独立的，但伪造它是非常常见的。所以我们可以用它的“子模块”来定义moduleA：

angular.module( 'moduleA.one', [] );
angular.module( 'moduleA.two', [] );

angular.module( 'moduleA', [
  'moduleA.one',
  'moduleA.two'
]);

开发人员/读者很清楚，moduleA.one 和 moduleA.two 是 moduleA 的一部分，但任何时候另一个模块依赖于 moduleA，它的两个子模块也将被包含在内。

但从技术上讲，这些都是独立的，因此moduleB 也可能需要moduleA.two。

问：如何动态添加控制器到元素，它不应该是静态的，即通过 html 标记 ng-controller。

这可能不是一个好主意。 “观点”是官方记录。你的用例是什么？

问：如果我想在所有模块之间共享一个东西，我该怎么做.. 对于例如，我在我的应用程序的所有模块之外定义了一个变量，并且我只想在模块中访问它们。这可能吗，我有这个疑问是因为它完全适用于个人范围，共享 scope 和 rootScope 等。

我不确定我是否理解您的要求。但是，当您在模块中定义某些内容时，您可以通过要求它从任何其他地方访问它，如上所述。但是在 AngularJS 应用程序中，应该有 anything “在所有模块之外” - 一切都应该在一个模块中，因为否则它会在全局范围内定义（例如window），这很糟糕练习。

要更好地了解如何构建模块以获得巨大的利益，请查看我的ngBoilerplate kickstarter：http://ngbp.github.io/ngbp/。模块结构专为代码重用而设计，并在实践中演示了其中的许多概念。

请随意详细说明其中任何一个，我会修改回复。

【讨论】：

明智的答案老兄.. 你能提供任何第一个答案的例子吗？
在我链接的ngBoilerplate 中，"#/home" route 使用了在its own module 中定义的titleService，以及在@987654324 中定义的plusOne 指令@.
感谢您用假的“子模块”解释事情

【解决方案2】：

最简单的方法

最简单的方法是将所有可共享的指令和其他部分添加到 ng 模块中。

angular
    .module("ng")
    .directive("myDirective", function() {
        ...
    })
    .filter("MyFilter", function() {
        ...
    });

这是最简单的方法（一种一劳永逸），因为您可以轻松地将指令脚本放到 HTML 中，然后在开发自然也需要它的新模块时忘记它。

这种技术还有什么好处

为什么向 ng 模块添加可共享的东西是明智的？因为您的应用中可能有简单的页面，这些页面没有定义特定的 ngApp 模块，而只是在 HTML/BODY 上设置 ng-app 并仅运行内联角度指令。

当您将指令添加到ng 模块时，这些页面也可以使用您的指令。

<html>
    <body ng-app>
        <div my-directive>
        ...
        </div>
    </body>
</html>

【讨论】：

这种技术的缺点？
我无法将此指令限制为不包含在某些模块中。

【解决方案3】：

难道你不能在应用的开头创建一个 div，让它的范围随你的需要而变大吗？

<div ng-controller="uberController as uber">

    ....

    other controllers and html code here

    ....
</div>

uber div 中的任何东西都可以使用 uber 控制器。

【讨论】：