The controller with the name is not registered error in UI Bootstrap Modal

问题

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.

回答1:

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 :)

回答2:

Using

angular.module('ui.bootstrap.demo', ['ui.bootstrap'])...

twice results in redefining a module. The first copy of a module where a controller was registered is replaced.

For subsequent module uses module getter should be used instead:

angular.module('ui.bootstrap.demo')...

Or even better, a submodule per each file. This eliminates potential race condition that can occur when using module getters.

回答3:

you are declaring the ui.bootstrap.demo module twice

in test.js file just remove the first line which is an extra declaration:

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);

来源：https://stackoverflow.com/questions/44231282/the-controller-with-the-name-is-not-registered-error-in-ui-bootstrap-modal

标签

angularjs

controller

angular-ui-bootstrap

bootstrap-modal