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

Argument Controller is not a function, got undefined - two Angular apps in one page

本文关键字：一个 应用程序 Angular 两个 Controller 函数 未定义 Argument      更新时间：2023-09-26

我基本上有这样的

(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>

但是正在接收错误Argument 'DocController' is not a function, got undefined

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

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

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

解决此问题的最简单方法是将脚本向上移动到应用程序入口点上方，但移动到AngularJS包含引用下方，以便在AngularJS启动应用程序并开始解析DOM然后注入之前对其进行解析和添加。

由于应用程序实际上只是另一个模块，一旦它被包括在内，你就需要在应用程序模块中引用它，以便它被注入并可用：

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

当您启动app模块时，<div id="app" ...下的整个DOM都会被解析。

这意味着当遇到<div id="doc" ng-controller="DocController">时，DocController必须存在于app模块中。在您的示例中，DocController仅存在于DocApp模块中，因此出现错误。

相关文章：