AngularJS页面上的自定义指令，没有特定的ng-app模块集

时间：2014-02-11 13:14:19

标签： javascript angularjs dependency-injection angularjs-directive

我有一些简单的页面，不需要在ng-app属性中提供特定的应用程序模块。但这些页面也使用了我的一些自定义指令。

看起来很自然我将所有指令放在单独的名称空间（即模块）中，即MyApp.Directives。

当我还提供我的应用程序模块时，这一切都很棒，因为我将MyApp.Directives添加为依赖项并且它可以正常工作。

angular.module("MyApp", ["MyApp.Directives", ...])

但即可。如上所述我也有一些非常简单的页面，它们并不真正需要任何特定的应用程序模块，因为它们不需要任何自定义控制器或任何东西。它们只是由ng-...属性/指令驱动。

问题

我知道我可以简单地将所有自定义指令添加到ng模块，并且所有页面都可以访问它们。那些有自定义应用程序模块和那些没有。但这打败了模块的目的，所以我想知道是否还有其他方法可以告诉依赖注入器我的附加指令/过滤器？

我想避免我的应用程序中的任何不需要的代码保持小和可维护。 （AngularJS是关于什么的）。我正在寻找的实际上是某些黑客，我将在我的指令文件中使用ng模块知道我的指令但不直接将它们添加到ng模块...相当高级的Angular问题，因为它可能涉及一些内部操作。

我已经尝试将我的指令模块添加到angular.module("ng").requires数组中，但这并不能解决问题。

1 个答案:

答案 0 :(得分：3)

＃1）如果您只有一个模块，则可以使用ngApp：

<html ng-app="MyApp.Directives">

＃2）如果您有多个模块，可以使用angular.bootstrap，如下所示：

angular.element(document).ready(function(){
  angular.bootstrap(document,['MyApp.Directives','MyApp.Filters']);
});

＃3）或者只是创建一个简单的模块来声明依赖项：

<html ng-app="myApp">

......

<script>
  angular.module('myApp',['MyApp.Directives','MyApp.Filters']);
</script>

如果我们只能写这样的东西：

<html ng-app="MyApp.Directives  MyApp.Filters">

我对source code：

进行了修补 
function angularInit(element, bootstrap) {

// some code

  if (appElement) {
    bootstrap(appElement, module ? module.split(/\s+/) : []); // split by spaces :)
  }
}

以下是演示：http://plnkr.co/edit/kSrY3WYzLG39NJ4UgTRM?p=preview

相关问题
最新问题