javascript - 参数 Controller 不是一个函数，未定义 - 一个页面中有两个 Angular 应用程序

Question

我基本上有这样的东西

(function(){
	'use strict';
	angular.module('app', []).controller('AppController', AppController);
	AppController.$inject = ['$scope'];
	function AppController($scope) {
		//controller stuff
	}
})();

(function(){
	'use strict';
	angular.element(document).ready(function() {
		angular.bootstrap(document.getElementById('app'), ['app']);
	});
})();

<div id="app" ng-controller="AppController">

  <div id="doc" ng-controller="DocController">
    {{hello}}
  </div>

  <script>
    var App = angular.module('DocApp', []).controller('DocController', DocController);
    DocController.$inject = ['$scope'];

    function DocController($scope) {
      $scope.hello = "HELLO WORLD";
    }
    angular.bootstrap(document.getElementById('doc'), ['DocApp']);
  </script>
</div>

但收到错误参数“DocController”不是函数，未定义

我最初的想法是这与两个不同的应用程序有关，但我无法弄清楚。

Answer 1

当 Angular 解析页面时，它会在解析 DOM 树时遇到指令。在您的情况下，它将在 AppController 之后解析 DocController。因此，它将期望 DocController 是一个它可以访问的已注册模块(在您当前的应用程序范围内)。

但是，直到之后在单独的脚本标记中注册 DocController，这意味着当 Angular 解析页面时它没有定义，即使定义了它，它也没有被注入(inject)进入您的应用程序模块。

解决此问题的最简单方法是将脚本移至应用程序入口点上方但 AngularJS 包含引用下方，以便在 AngularJS 引导您的应用程序并开始解析 DOM 并注入(inject)之前解析并添加该脚本。

由于应用程序实际上只是另一个模块，因此一旦包含它，您需要在应用程序模块中引用它，以便它被注入(inject)并可用:

angular.module('app', ['DocApp']).controller('AppController', AppController);