由ng-include加載的控制器不工作

我有一個頁面，彈出窗口在幾頁上使用，我用ng-include加載它。在這個彈出窗口中，有三個選項卡也可以使用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) { ... }創建控制器，但這兩種都不是選項，那麼其實一切正常。

來源

2014-11-06 Dominik G

它看起來好像你正在試圖包括你的控制器在角度引導後，它可能不會讓你這樣做。我可以問爲什麼你需要這樣做，爲什麼你不能加載基本頁面或Cockpit.html中的所有控制器？ – Shoreline 2014-11-06 11:19:34

正如我所說，這包括在幾頁中。將它包含在基本頁面中是可能的，但是我們必須在每個頁面中包含5個額外的腳本標記，所有這些都包含在內，或者將所有內容都包含在一個大的JavaScript文件中。當然，這可能是非常不方便的:) – 2014-11-06 12:41:39

我有完全相同的問題。發現一個解決方案感謝：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() {... });

來源

2015-09-28 11:44:57

由ng-include加載的控制器不工作

回答

相關問題