javascript 如何在 AngularJS 中的多个模块之间共享单个指令

How to share a single Directive across multiple modules in AngularJS

提问by Exception

As far as I know about AngularJS, this is one of the interesting libraries out today. I am slowly understanding the Angular power, and I am seriously loving it. I have a few doubts and I hope I will get them clarified. Even after some background work, I am unable to understand how they can be done

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

1. For example I have a module in my App and I have directives written for it, And I want to add few more modules to my app and also want to reuse existing directives written for another module. How I can achieve that. Not only modules that applies to filters, config etc..

2. Can I have sub modules defined inside a Module?

3. How can I add a controller to an element dynamically, it should not be static, i.e through html markup ng-controller.

4. If I want to share a thing across all modules how can I do that.. For example I have a variable defined outside of all modules in my app and I just want to access them inside modules.. Is that possible, I have this doubt because it completely works on individual scopes, shared scope and rootScope etc..

1. 例如，我的应用程序中有一个模块，我有为它编写的指令，我想向我的应用程序添加更多模块，还想重用为另一个模块编写的现有指令。我怎么能做到这一点。不仅适用于过滤器、配置等的模块。

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

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

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

Any help would be appreciated.

任何帮助，将不胜感激。

回答by Josh David Miller

Q: For example I have a module in my App and I have directives written for it, And I want to add few more modules to my app and also want to reuse existing directives written for another module. How I can achieve that. Not only modules that applies to filters, config etc..

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

When you declare a module, you specify its dependencies. So if you have a directive like this:

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

angular.module( 'moduleA', [] )

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

You can require that module from another module:

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

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

The array argument to angular.moduleis a list of dependencies.

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

Q: Can I have sub modules defined inside a Module?

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

Modules are technically all independent, but it's super common to fake it. So we can define moduleAwith it's "submodules" like so:

模块在技术上都是独立的，但伪造它是非常普遍的。所以我们可以moduleA像这样定义它的“子模块”：

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

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

And it's clear to the developer/reader that moduleA.oneand moduleA.twoare part of moduleA, but also anytime another module depends on moduleA, its two submodules will be included as well.

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

But technically, these are all independent, so moduleBcould also require moduleA.twoif it wanted to do so.

但从技术上讲，这些都是独立的，所以如果它想这样做moduleB也可能需要moduleA.two。

Q: How can I add a controller to an element dynamically, it should not be static, i.e through html markup ng-controller.

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

This is probably not a good idea. The "view" is the official record. What's your use case?

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

Q: If I want to share a thing across all modules how can I do that.. For example I have a variable defined outside of all modules in my app and I just want to access them inside modules.. Is that possible, I have this doubt because it completely works on individual scopes, shared scope and rootScope etc..

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

I am not sure I understand what you're asking. But when you define something in a module, you can access it from any other just by requiring it, as discussed above. But in an AngularJS app, there should be anything"outside of all modules" - everything should be in a module because otherwise it'ts defined in the global scope (e.g. window) and that's just bad practice.

我不确定我明白你在问什么。但是当你在一个模块中定义一些东西时，你可以从任何其他模块中访问它，就像上面讨论的那样。但是在 AngularJS 应用程序中，应该有任何“在所有模块之外”的东西——一切都应该在一个模块中，否则它不会在全局范围内定义（例如window），这只是不好的做法。

---

---

To get a better understanding of how modules can be structured to great benefit, check out my ngBoilerplatekickstarter: http://ngbp.github.io/ngbp/. The module structure is specifically designed for code reuse and demonstrates many of these concepts in practice.

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

Feel free to elaborate on any of these and I will revise the responses.

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

回答by Robert Koritnik

The easiest way

最简单的方法

The easiest way is to add all sharable directives and other parts to ngmodule.

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

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

This is the easiest way (a kind of set and forget) as you can easily just drop your directive script to your HTML and forget about it while developing new modules that naturally also require it.

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

What else is good about this technique

这种技术还有什么好处

Why is adding shareable stuff to ngmodule sensible? Because you may have simple pages in your app that don't define a particular ngAppmodule, but rather just set ng-appon HTML/BODY and run inline angular directives only.

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

When you add your directive to ngmodule, these pages can also use your directive.

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

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

回答by user2215550

Can't you just create a div at the beginning of your app so that its scope will be as large as you need it?

您不能在应用程序的开头创建一个 div 以便其范围与您需要的一样大吗？

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

    ....

    other controllers and html code here

    ....
</div>

Anything inside the uber div may use the uber controller.

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