Question

startupModule.js：

(function () {
    'use strict';

    let app = angular.module('startupModule', []);

    app.controller('controller1', function () {
        // do this work on loading...
    });

    app.controller('controller2', function () {
        // do this work on loading...    
    });
}());

loginModule.js：

(function () {
    'use strict';

    let app = angular.module('loginModule', []);

    app.controller('loginController', function () {

    });
}());

在视图中：

<div ng-app="startupModule" ng-controller="controller1">

</div>

<div ng-app="loginModule" ng-controller="loginController">

</div>

<div ng-app="startupModule" ng-controller="controller2">

</div>

加载时，我想调用控制器controller1和controller2自动完成一些工作。 loginModule是我要使用的主要模块，无法将其移除或与startupModule合并。

当我运行它时，Console没有错误。但是第三个div中的控制器controller2不能被执行，因为ng-app="startupModule"无法被召回（我猜）。

要再次检查，我已删除第一个div中的ng-app="startupController" ng-controller="controller1"。然后，controller2应该有用。

我的问题：如何通过多次调用ng-app来调用模块？

Answer 1

根据AngularJs docs for `ngApp，

每个HTML文档只能自动引导一个AngularJS应用程序。在文档中找到的第一个ngApp将用于定义作为应用程序自动引导的根元素。要在HTML文档中运行多个应用程序，您必须使用angular.bootstrap手动引导它们。

因此，您必须手动引导模块。例如：

<div id="app1" ng-controller="controller1"></div>    
<div id="app2" ng-controller="loginController"></div>    
<div id="app3" ng-controller="controller2"></div>

所以从javascript你可以引导它们：

(function () {
    'use strict';

    var 
        app1 = document.getElementById('app1'),
        app2 = document.getElementById('app2'),
        app3 = document.getElementById('app3');

    angular.element(document).ready(function () {
        angular.bootstrap(app1 , ['startupModule']);
        angular.bootstrap(app2 , ['loginModule']);
        angular.bootstrap(app3 , ['startupModule']);
    });
})();

如何多次调用模块？

1 个答案: