ng-include 加载的控制器不起作用答案

【问题标题】：Controller loaded by ng-include not workingng-include 加载的控制器不起作用
【发布时间】：2015-01-02 20:04:11
【问题描述】：

我有一个带有弹出窗口的页面，我在几个页面上都使用了它，我使用 ng-include 加载它。在这个弹出窗口中，三个选项卡也使用 ng-include 动态加载。

所以我的代码如下所示：

<div ng-include="'/pages/ng-templates/Cockpit.html'"></div>

在Cockpit.html我有以下代码：

<div id="dlgCockpit" class="Cockpit jquerydialog">
    <div id="tabs">
        <ul>
            <li><a href="#tabA">tabA</a></li>
            <li><a href="#tabB">tabB</a></li>
            <li><a href="#tabC">tabC</a></li>
        </ul>

        <div id="tabA">
            <div ng-include="'/pages/ng-templates/Cockpit-A.html'"></div>
        </div>
        <div id="tabB">
            <div ng-include="'/pages/ng-templates/Cockpit-B.html'"></div>
        </div>
        <div id="tabC">
            <div ng-include="'/pages/ng-templates/Cockpit-C.html'"></div>
        </div>
    </div>
</div>

<script src="/pages/ng-templates/scripts/Cockpit.js"></script>

在Cockpit-A.html 我有以下代码：

<div id="dlgCockpitA">
    <form name="frmA" class="cntrCockpitA form" ng-controller="AController">
    <!-- some inputs using ng-model -->
    </form>
</div>
<script src="/pages/ng-templates/scripts/Cockpit-A.js"></script>

Cockpit.js:

function showCockpit(vsTnID, vsBenutzer) {
    $('#dlgCockpit').data('tnid', vsTnID);
    var $dialog = $("#dlgCockpit")
        .dialog({
            autoOpen: false,
            title: locBenutzer + ': ' + vsBenutzer + ' (ID: ' + vsTnID + ')',
            width: 1000,
            show: 'fade',
            resizable: false,
            open: function (event, ui) {
              $("#tabs").tabs({ active: 0 });
              angular.element($('.cntrCockpitA')).scope().showStammdaten(vsTnID, 'Standard');
            },
            close: function (event, ui) {
            }
        });

    $dialog.dialog('open');
    return false;
}

Cockpit-A.js:

app.controller('AController', ['$scope', '$http', function ($scope, $http) {
    //some function definitions on $scope
}]);

当我加载页面时，我会在 javascript 控制台中看到以下内容：

Error: [ng:areq] Argument 'AController' is not a function, got undefined
http://errors.angularjs.org/1.2.26/ng/areq?p0=StammdatenController&p1=not%20aNaNunction%2C%20got%20undefined
    at http://localhost:63323/scripts/angular/angular-1.2.26.js:78:12
    at assertArg (http://localhost:63323/scripts/angular/angular-1.2.26.js:1509:11)
    at assertArgFn (http://localhost:63323/scripts/angular/angular-1.2.26.js:1519:3)
    at http://localhost:63323/scripts/angular/angular-1.2.26.js:7278:9
    at http://localhost:63323/scripts/angular/angular-1.2.26.js:6670:34
    at forEach (http://localhost:63323/scripts/angular/angular-1.2.26.js:332:20)
    at nodeLinkFn (http://localhost:63323/scripts/angular/angular-1.2.26.js:6657:11)
    at compositeLinkFn (http://localhost:63323/scripts/angular/angular-1.2.26.js:6105:13)
    at compositeLinkFn (http://localhost:63323/scripts/angular/angular-1.2.26.js:6108:13)
    at publicLinkFn (http://localhost:63323/scripts/angular/angular-1.2.26.js:6001:30)

调用showCockpit 时，angular.element($('.cntrCockpitA')).scope().showStammdaten(vsTnID, 'Standard'); 行中出现以下错误：

Uncaught TypeError: undefined is not a function

实际上，如果我将Cockpit-A.js 的脚本标记放在包含Cockpit.html 的“基本页面”中，或者如果我仅通过调用function AController($scope, $http) { ... } 创建控制器，那么一切正常，但这两者都不是一个选项。

【问题讨论】：

在 Angular 启动后，您似乎正在尝试包含您的控制器，但它可能不会让您这样做。请问您为什么需要这样做，为什么不能在基本页面或 Cockpit.html 中加载所有控制器？
正如我所说，这包含在几个页面中。将它包含在基本页面中是可能的，但是我们必须在每个页面中包含 5 个额外的脚本标签，所有这些都包含在一个大的 javascript 文件中。当然有可能只是非常不方便:)

标签： angularjs angularjs-controller angularjs-ng-include

【解决方案1】：

我遇到了完全相同的问题。感谢：http://ify.io/lazy-loading-in-angularjs/

基本上，在引导应用程序后无法使用 app.controller(...)。我建议阅读链接以获取更多信息。解决的办法是提前保存controllerProvider，用它来注册模块。

var app = angular.module('myModule', []);
app.config(function($controllerProvider) {
    app.controllerProvider = $controllerProvider;
});

// Later on... after bootstrapping...
app.controllerProvider.register('myController', function() {... });

【讨论】：