UI Bootstrap Modal中未注册名称为名称的控制器错误 [英] The controller with the name is not registered error in UI Bootstrap Modal
问题描述
我无法使用属于UIBootstrap模态功能中单独文件的控制器.但是，当我在同一文件中调用同一控制器时，该功能将完美运行.
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.
下面的代码:-
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 (这在两个文件中都存在控制器的情况下工作正常)
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"];
}])
当我想将底部控制器分离到另一个文件中并尝试按如下所示与Test1.html附加时，会出现以下错误:-
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:-
名称为'ModalDemoCtrl1'的控制器未注册.
The controller with the name 'ModalDemoCtrl1' is not registered.
Test.js (已修改)
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',
});
};
}])
测试1.html (已修改)
<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 (已添加新文件)
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.请让我知道如何解决该问题.
I want to place the code in the separate controller file like in Test1.js. Please let me know how to remove the problem.
推荐答案
以下是适用于您的工作副本.
这是项目文件夹结构:
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>
请注意，您不再需要< html>和< body> Test1.html 文件
Note that you no longer need <html> and <body> tags in Test1.html file
脚本/App.module.js
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
此语句只能在您的应用程序中使用一次
this statement must be used once only in your application
脚本/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',
});
};
}]);
脚本/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屋！
