UI Bootstrap Modal 中的控制器名称未注册错误 [英] The controller with the name is not registered error in UI Bootstrap Modal
问题描述
我无法在 UIBootstrap 模态功能中使用属于单独文件的控制器.但是，当我在同一个文件中调用同一个控制器时，该功能可以完美运行.
在这段代码下面:-
Test.html
<头><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script><script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script><script src="../Scripts/AngularControllers/Test.js"></script><link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><身体><div ng-controller="ModalDemoCtrl"><button type="button" ng-click="open()">打开我！</button></html>
Test1.html
<头><title></title><body ng-app="ui.bootstrap.demo"><h1>模态体</h1>请提供持续时间<select ng-model="selectedDays" ng-options="x for x in Days"></select></html>Test.js (这可以正常工作，因为控制器存在于同一个文件中)
var myApp = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);myApp.controller('ModalDemoCtrl',['$scope','$uibModal', function ($scope, $uibModal) {$scope.open = 函数(大小，parentSelector){var modalInstance = $uibModal.open({templateUrl: 'Test1.html',控制器:'ModalDemoCtrl1'，});};}]).controller('ModalDemoCtrl1', ['$scope', '$uibModalInstance', function ($scope, $uibModalInstance) {$scope.Days = ["Days", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];}])当我想在另一个文件中分离底部控制器并尝试使用 Test1.html 进行附加时，如下所示，然后出现以下错误:-
<块引用>名为ModalDemoCtrl1"的控制器未注册.
Test.js (修改)
var myApp = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);myApp.controller('ModalDemoCtrl',['$scope','$uibModal', function ($scope, $uibModal) {$scope.open = 函数(大小，parentSelector){var modalInstance = $uibModal.open({templateUrl: 'Test1.html',控制器:'ModalDemoCtrl1'，});};}])测试 1.html (修改)
<头><title></title><meta charset="utf-8"/><script src="../Scripts/AngularControllers/Test1.js"></script><body ng-app="ui.bootstrap.demo"><div ng-controller="ModalDemoCtrl1"><h1>模态体</h1>请提供持续时间<select ng-model="selectedDays" ng-options="x for x in Days"></select></html>
Test1.js (添加了新文件)
var myApp = angular.module('ui.bootstrap.demo');myApp.controller('ModalDemoCtrl1', ['$scope', '$uibModalInstance', function ($scope, $uibModalInstance) {$scope.Days = ["Days", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];}])我想将代码放在单独的控制器文件中，就像在 Test1.js 中一样.请告诉我如何解决这个问题.
这是一份适合您的工作副本.
这里是项目文件夹结构:
Pages/Test.html
<头><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script><script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script><script src="../Scripts/App.module.js"></script><script src="../Scripts/AngularControllers/Test.js"></script><script src="../Scripts/AngularControllers/Test1.js"></script><link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><身体><div ng-controller="ModalDemoCtrl"><button type="button" ng-click="open()">打开我！</button></html>
Pages/Test1.html
<h1>模态体</h1>请提供持续时间<select ng-model="selectedDays" ng-options="x for x in Days"></select>请注意，您不再需要 <html>和<身体>Test1.html 文件中的标签
脚本/App.module.js
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);此语句只能在您的应用程序中使用一次
脚本/AngularControllers/Test.js
var myApp = angular.module('ui.bootstrap.demo');myApp.controller('ModalDemoCtrl', ['$scope','$uibModal', function ($scope, $uibModal) {$scope.open = 函数(大小，parentSelector){var modalInstance = $uibModal.open({templateUrl: 'test1.html',控制器:'ModalDemoCtrl1'，});};}]);脚本/AngularControllers/Test1.js
var myApp = angular.module('ui.bootstrap.demo');myApp.controller('ModalDemoCtrl1', ['$scope', '$uibModalInstance', function ($scope, $uibModalInstance) {$scope.Days = ["Days", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];}]);希望有帮助.快乐编码:)
I am not able to work out with controller that belongs to separate file in UIBootstrap modal functionality. However when I call the same piece of controller in same file then the functionality works perfectly.
Below the piece of code:-
Test.html
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="../Scripts/AngularControllers/Test.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<button type="button" ng-click="open()">Open me!</button>
</div>
</body>
</html>
Test1.html
<html>
<head>
<title></title>
</head>
<body ng-app="ui.bootstrap.demo">
<h1>Modal Body</h1>
Please Provide Duration
<select ng-model="selectedDays" ng-options="x for x in Days"></select>
</body>
</html>
Test.js (This works fine as both the controller present in same file)
var myApp = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
myApp.controller('ModalDemoCtrl',['$scope','$uibModal', function ($scope, $uibModal) {
$scope.open = function (size, parentSelector) {
var modalInstance = $uibModal.open({
templateUrl: 'Test1.html',
controller: 'ModalDemoCtrl1',
});
};
}])
.controller('ModalDemoCtrl1', ['$scope', '$uibModalInstance', function ($scope, $uibModalInstance) {
$scope.Days = ["Days", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
}])
When I want to separate the bottom controller in another file and try to attach with Test1.html as below then I get the below error:-
The controller with the name 'ModalDemoCtrl1' is not registered.
Test.js (Modified)
var myApp = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
myApp.controller('ModalDemoCtrl',['$scope','$uibModal', function ($scope, $uibModal) {
$scope.open = function (size, parentSelector) {
var modalInstance = $uibModal.open({
templateUrl: 'Test1.html',
controller: 'ModalDemoCtrl1',
});
};
}])
Test 1.html (Modified)
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="../Scripts/AngularControllers/Test1.js"></script>
</head>
<body ng-app="ui.bootstrap.demo">
<div ng-controller="ModalDemoCtrl1">
<h1>Modal Body</h1>
Please Provide Duration
<select ng-model="selectedDays" ng-options="x for x in Days"></select>
</div>
</body>
</html>
Test1.js (New File Added)
var myApp = angular.module('ui.bootstrap.demo');
myApp.controller('ModalDemoCtrl1', ['$scope', '$uibModalInstance', function ($scope, $uibModalInstance) {
$scope.Days = ["Days", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
}])
I want to place the code in the separate controller file like in Test1.js. Please let me know how to remove the problem.
Here is a working copy that should work for you.
Here is the project folder structure :
Pages/Test.html
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="../Scripts/App.module.js"></script>
<script src="../Scripts/AngularControllers/Test.js"></script>
<script src="../Scripts/AngularControllers/Test1.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<button type="button" ng-click="open()">Open me!</button>
</div>
</body>
</html>
Pages/Test1.html
<div>
<h1>Modal Body</h1>
Please Provide Duration
<select ng-model="selectedDays" ng-options="x for x in Days"></select>
</div>
Note that you no longer need <html> and <body> tags in Test1.html file
Scripts/App.module.js
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
this statement must be used once only in your application
Scripts/AngularControllers/Test.js
var myApp = angular.module('ui.bootstrap.demo');
myApp.controller('ModalDemoCtrl', ['$scope','$uibModal', function ($scope, $uibModal) {
$scope.open = function (size, parentSelector) {
var modalInstance = $uibModal.open({
templateUrl: 'test1.html',
controller: 'ModalDemoCtrl1',
});
};
}]);
Scripts/AngularControllers/Test1.js
var myApp = angular.module('ui.bootstrap.demo');
myApp.controller('ModalDemoCtrl1', ['$scope', '$uibModalInstance', function ($scope, $uibModalInstance) {
$scope.Days = ["Days", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
}]);
I hope that helps. Happy coding :)
这篇关于UI Bootstrap Modal 中的控制器名称未注册错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
