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

时间:2013-03-03 20:22:26

标签: javascript angularjs

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

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

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

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

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

  5. 任何帮助将不胜感激。

3 个答案:

答案 0 :(得分:51)

  

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

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

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.onemoduleA.twomoduleA的一部分,但是只要另一个模块依赖moduleA,它的两个子模块将是包括在内。

但从技术上讲,这些都是独立的,因此moduleB如果愿意,也可能需要moduleA.two

  

问:如何动态地向元素添加控制器,它不应该   静态,即通过html标记控制器。

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

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

我不确定我明白你在问什么。但是,当您在模块中定义某些内容时,只需要它就可以从任何其他模块访问它,如上所述。但是在一个AngularJS应用程序中,应该有任何“在所有模块之外” - 所有内容都应该在一个模块中,因为否则它在全局范围内定义(例如window),那就是只是不好的做法。


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

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

答案 1 :(得分:5)

最简单的方法

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

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

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

这项技术还有什么好处

为什么在 ng 模块中添加可分享内容?因为您的应用中可能没有定义特定 ngApp 模块的简单页面,而只是在HTML / BODY上设置ng-app并仅运行内联角度指令。

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

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

答案 2 :(得分:0)

您是否只是在应用的开头创建了一个div,以便其范围可以根据您的需要进行调整?

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

    ....

    other controllers and html code here

    ....
</div>

超级div内部的任何内容都可能使用超级控制器。