在页面上引导多个角度应用程序会导致控制器未定义的错误答案

【问题标题】：Bootstrapping multiple angular apps on a page causes the error of controller undefined在页面上引导多个角度应用程序会导致控制器未定义的错误
【发布时间】：2015-01-22 12:00:00
【问题描述】：

我的页面上有两个 Angular 应用程序。第一个是使用主体上的“ng-app”指令引导的。第二个应用程序使用 angular.bootstrap 方法手动初始化。

第一个自动引导的应用程序

<body ng-cloak ng-app="app">
<section id="mainbody">
  <div class="container radar-main-container">
    @RenderBody()
  </div>
</section>

下面是主应用的 app.js

var commonModule = angular.module('common', ['ui.router']);
var appMainModule = angular.module('app', ['common']);

手动引导的第二个应用

@section footerScript {
  angular.bootstrap(document.getElementById('signup'), ['signupApp']);
}

HTML

<div id="signup" ng-app="signupApp" ng-controller="SignupController">
  <div ui-view></div>
</div>

在第二个模块中创建的控制器：

signupModule.controller("SignupController", ['$scope', '$location',
    function($scope, $location, $window) {
}

signupModule.controller("PackageInfoController", ['$scope', '$location',
    function($scope, $location) {
}

当我运行此代码时，我收到错误“SignupController”不是未定义的函数，它会将我带到此链接Error

【问题讨论】：

所以signupModule 定义为var signupModule = angular.module('signupApp'); 吗？
是如下：var signupModule = angular.module('signupApp', ['common']);
您不应将ng-app 用于您手动引导的模块。见angular documentation
stackoverflow.com/questions/18571301/… 的可能重复项

标签： javascript angularjs razor angularjs-directive

【解决方案1】：

也许这对你有帮助，因为它工作得很好。

HTML 模板

<!DOCTYPE html>
<html>    
  <head>
    ...
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-app="app" ng-controller="AppCtrl">
      main
    </div>
    <div id="signup" ng-controller="SignupCtrl">
      signup
    </div>

    <script>
      // @section footerScript
      angular.element(document).ready(function() {
        angular.bootstrap(document.getElementById('signup'), ['signup','common']);
      });
  </body>
</html>

app.js

var common = angular.module('common', []);

var app = angular.module('app', ['common']);
app.controller('AppCtrl', function($scope) {});

var signup = angular.module('signup', ['common']);
signup.controller('SignupCtrl', function($scope) {});

【讨论】：

好吧，您已经包含了“注册”div。但是，如果我使用 MVC razor 引擎 [@RenderBody] 语法加载它会怎样。当时它给出了错误。
不熟悉剃须刀。更新了 doc ready 中的答案包装引导。如果这没有帮助，那么您需要其他人的帮助。此外，将剃刀标签添加到您的问题中。

【解决方案2】：

首先，您的应用程序不能嵌套（一个在另一个内部）。您的应用程序必须在它之外，而不是在 body 标记上。第二件事是，您只能在 html 文件中使用 ng-app 一次。

【讨论】：