如何在AngularJS的多个模块中共享一个指令

How to share a single Directive across multiple modules in AngularJS

本文关键字：共享 指令 一个 模块 AngularJS      更新时间：2023-09-26

就我对AngularJS的了解而言，这是当今最有趣的库之一。我慢慢地理解了角的力量，我真的很喜欢它。我有一些疑问，我希望我能把它们弄清楚。即使做了一些背景工作，我也无法理解他们是如何做到的。

  1. 例如，我在我的应用程序中有一个模块，我有为它编写的指令，我想在我的应用程序中添加更多的模块，也想重用为另一个模块编写的现有指令。我怎么能做到呢?

  2. 我可以在模块内定义子模块吗?

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

  4. 如果我想在所有模块中共享一个东西，我怎么能做到这一点…例如，我有一个变量定义在我的应用程序的所有模块之外，我只是想在模块内访问它们。这是可能的吗?我对此表示怀疑，因为它完全适用于单个作用域、共享作用域和rootScope等。

任何帮助都会很感激。

Q:例如，我有一个模块在我的应用程序，我有指令写我想在我的应用中添加更多的模块，我也想重用为另一个模块编写的现有指令。我怎么能实现这一点。不仅模块适用于过滤器，配置等

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

angular.module( 'moduleA', [] )
.directive( 'myDirective', function () {
  // ...
});

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

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

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

Q:我可以在模块内定义子模块吗?

模块在技术上都是独立的，但伪造它是非常常见的。所以我们可以用它的"子模块"来定义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应用中，应该有任何"在所有模块之外"的东西——所有东西都应该在一个模块中，否则它就会在全局作用域中定义(例如window)，这是不好的做法。

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

请随意详细说明，我将修改回答。

最简单的方法

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

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

这是最简单的方法(一种设置和忘记)，因为你可以很容易地把你的指令脚本放到HTML中，在开发自然也需要它的新模块时忘记它。

该技术还有哪些优点

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

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

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

难道你不能在应用程序的开始创建一个div，这样它的作用域就会像你需要的那样大吗?

<div ng-controller="uberController as uber">
    ....
    other controllers and html code here
    ....
</div>

优步div中的任何内容都可以使用优步控制器

相关文章：