由 ng-include 加载的控制器不起作用
[英] Controller loaded by ng-include not working
本文介绍了由 ng-include 加载的控制器不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个页面，我在几个页面上使用了一个弹出窗口，我使用 ng-include 加载它.在此弹出窗口中，三个选项卡也使用 ng-include 动态加载.
所以我的代码是这样的:
<div ng-include="'/pages/ng-templates/Cockpit.html'"></div>
在 Cockpit.html 我有以下代码:
<div id="标签"><ul><li><a href="#tabA">tabA</a></li><li><a href="#tabB">tabB</a></li><li><a href="#tabC">tabC</a></li><div id="tabA"><div ng-include="'/pages/ng-templates/Cockpit-A.html'"></div>
<div id="tabB"><div ng-include="'/pages/ng-templates/Cockpit-B.html'"></div>
<div id="tabC"><div ng-include="'/pages/ng-templates/Cockpit-C.html'"></div>
<script src="/pages/ng-templates/scripts/Cockpit.js"></script>
在 Cockpit-A.html 中，我有以下代码:
<form name="frmA" class="cntrCockpitA form" ng-controller="AController"><!-- 一些使用 ng-model 的输入 --></表单>
<script src="/pages/ng-templates/scripts/Cockpit-A.js"></script>
Cockpit.js:
function showCockpit(vsTnID, vsBenutzer) {$('#dlgCockpit').data('tnid', vsTnID);var $dialog = $("#dlgCockpit").对话({自动打开:假，标题: locBenutzer + ': ' + vsBenutzer + ' (ID: ' + vsTnID + ')',宽度:1000，显示:'褪色'，可调整大小:假，打开:函数(事件，用户界面){$("#tabs").tabs({ active: 0 });angular.element($('.cntrCockpitA')).scope().showStammdaten(vsTnID, '标准');},关闭:函数(事件，用户界面){}});$dialog.dialog('打开');返回假；}
Cockpit-A.js:
app.controller('AController', ['$scope', '$http', function ($scope, $http) {//$scope 上的一些函数定义}]);
当我加载页面时，我在 javascript 控制台中得到以下内容:
错误:[ng:areq] 参数AController"不是函数，未定义http://errors.angularjs.org/1.2.26/ng/areq?p0=StammdatenController&p1=not%20aNaNunction%2C%20got%20undefined在 http://localhost:63323/scripts/angular/angular-1.2.26.js:78:12在 assertArg (http://localhost:63323/scripts/angular/angular-1.2.26.js:1509:11)在 assertArgFn (http://localhost:63323/scripts/angular/angular-1.2.26.js:1519:3)在 http://localhost:63323/scripts/angular/angular-1.2.26.js:7278:9在 http://localhost:63323/scripts/angular/angular-1.2.26.js:6670:34在 forEach (http://localhost:63323/scripts/angular/angular-1.2.26.js:332:20)在 nodeLinkFn (http://localhost:63323/scripts/angular/angular-1.2.26.js:6657:11)在复合链接Fn (http://localhost:63323/scripts/angular/angular-1.2.26.js:6105:13)在复合链接Fn (http://localhost:63323/scripts/angular/angular-1.2.26.js:6108:13)在 publicLinkFn (http://localhost:63323/scripts/angular/angular-1.2.26.js:6001:30)
在调用 showCockpit 时，我在 angular.element($('.cntrCockpitA')).scope().showStammdaten(vsTnID, 'Standard'); 行中收到以下错误.:
未捕获的类型错误:未定义不是函数
实际上，如果我将 Cockpit-A.js 的脚本标记放在包含 Cockpit.html 的基本页面"中，或者如果我创建控制器，一切都会正常工作只需调用 function AController($scope, $http) { ... }，但这两个都不是一个选项.
解决方案
我遇到了完全相同的问题.找到了一个解决方案，感谢:http://ify.io/lazy-loading-in-angularjs/
基本上，在引导应用程序后无法使用 app.controller(...).我建议阅读链接以获取更多信息.解决办法是提前保存controllerProvider，用它来注册模块.
var app = angular.module('myModule', []);app.config(function($controllerProvider) {app.controllerProvider = $controllerProvider;});//稍后……在引导之后……app.controllerProvider.register('myController', function() {... });
I have a page with a pop-up I use on several pages and I load it using ng-include. In this pop-up there is three tabs also dynamically loaded using ng-include.
So my code looks like this:
<div ng-include="'/pages/ng-templates/Cockpit.html'"></div>
in Cockpit.html I have the following code:
<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>
In Cockpit-A.html I have the following Code:
<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
}]);
When I load the page I get the following in the javascript console:
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)
When calling showCockpit I get the following error in the line angular.element($('.cntrCockpitA')).scope().showStammdaten(vsTnID, 'Standard');:
Uncaught TypeError: undefined is not a function
Actually everything works if I put the script tag for Cockpit-A.js in the "base page" which is including Cockpit.html or if I create the Controller just by calling function AController($scope, $http) { ... }, but both of those are not an option.
解决方案
I had the exact same problem. Found a solution thanks to: http://ify.io/lazy-loading-in-angularjs/
Basically, it is not possible to use app.controller(...) after bootstrapping the app. I suggest reading the link for more information. The solution is to save the controllerProvider ahead and use it to register the module.
var app = angular.module('myModule', []);
app.config(function($controllerProvider) {
app.controllerProvider = $controllerProvider;
});
// Later on... after bootstrapping...
app.controllerProvider.register('myController', function() {... });
这篇关于由 ng-include 加载的控制器不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
