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

Question

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

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

任何帮助,将不胜感激.

Answer 1

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

声明模块时,指定其依赖项.所以如果你有这样的指令:

angular.module( 'moduleA', [] )

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

您可以从其他模块中请求该模块:

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

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

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

模块在技术上都是独立的,但伪造它是很常见的.所以我们可以moduleA用它来定义"submodules",如下所示:

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.

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

问:如果我想在所有模块中共享一个东西,我该怎么做呢...例如,我在我的应用程序中的所有模块之外定义了一个变量,我只想在模块内访问它们.这是可能的,我有这个疑问,因为它完全适用于各个范围,共享范围和rootScope等.

我不确定我明白你在问什么.但是,当您在模块中定义某些内容时,只需要它就可以从任何其他模块访问它,如上所述.但在AngularJS应用,应该有什么 "的所有模块外" -一切都应该是在一个模块中,否则it'ts在全球范围内(如定义window),而这仅仅是不好的做法.

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

请随意详细说明这些内容,我将修改回复.

Answer 2

最简单的方法

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

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

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

为什么在ng模块中添加可共享的东西是合理的？因为您的应用程序中可能没有定义特定ngApp模块的简单页面,而只是设置ng-appHTML/BODY并仅运行内联角度指令.

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

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