Я не могу работать с контроллером, который принадлежит отдельному файлу в модальной функциональности UIBootstrap. Однако когда я вызываю один и тот же кусок контроллера в одном и том же файле, функциональность работает отлично.

Ниже кусок кода: -

< Сильный > 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, как показано ниже, я получаю следующую ошибку: -

Контроллер с именем 'ModalDemoCtrl1' не зарегистрирован.

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',
            });

        };    
    }])

Test 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. Пожалуйста, дайте мне знать, как устранить проблему.

0
simple user 28 Май 2017 в 22:38

2 ответа

С помощью

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

Дважды приводит к переопределению модуля. Первая копия модуля, в котором был зарегистрирован контроллер, заменена.

Для последующего использования модуля следует использовать модуль getter:

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

Или, что еще лучше, подмодуль для каждого файла. Это устраняет потенциальное состояние гонки, которое может возникнуть при использовании модуля получения.

0
Estus Flask 28 Май 2017 в 20:05

Вы объявляете модуль ui.bootstrap.demo дважды

В файле test.js просто удалите первую строку, которая является дополнительной декларацией:

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
0
sic-sic 28 Май 2017 в 20:09