Angular ModalController будет его собственным файлом

Question

Angular ModalController будет его собственным файлом

0

Я смотрел на ответ и вопрос, изложенные в Angular ui modal с контроллером в отдельном файле js, и я хочу достичь того же результата, то есть иметь модальный контроллер в своем собственном файле controller.js, только что мой главный контроллер реализован в по-другому. Вот как у меня это.

(function () {
     angular.module('app.mainModule')
            .controller('MainController', MainController);

    var ACTION = {
    CANCEL: 0,
    CONFIRM: 1
    };

    MainController.$inject = ['$rootScope', '$modal'];
    function MainController($rootScope, $modal) {
    var vm = this;
    vm.method1 = method1;
    vm.method2 = method2;

    function method1(){
       var modalInstance = createModal();
       // do something....
    }

  function createModal(){
        return $modal.open({
            templateUrl: 'app/someModalFile.html',
            controller: 'ModalController as vm',
            resolve: {
                action: function(){
                    return vm.action;
                },
                someVar: function() {
                    return vm.someVar.obj;
                },
                anotherVar: function(){
                    return vm.anotherVar;
                }
            }
        });
    }
 // I want to have this in a separate controller file and 
 // use the MainController to invoke this modal controller.
 function ModalController($modalInstance, someVar, anotherVar){
    var vm = this;

    vm.confirm = confirm;
    vm.cancel = cancel;
    vm.someVar = someVar;   // to display on the modal window
    vm.anotherVar = anotherVar;

    function confirm(){
        $modalInstance.close({action: ACTION.CONFIRM});
    }

    function cancel(){
        $modalInstance.close({action: ACTION.CANCEL});
    }
}
})();

Есть идеи, как это сделать?

noobcoder 03 авг. 2016, в 19:33

Источник

Теги:

javascript

angularjs

2 ответа

1

Возможно, если я правильно понял ваш вопрос, я думаю, вы ищете это:

http://plnkr.co/edit/lH5CMvvIEu8nqihZPfgk?p=preview

Главный контроллер:

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function($scope, $uibModal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.animationsEnabled = true;

  $scope.open = function(size) {

  var modalInstance = $uibModal.open({
    animation: $scope.animationsEnabled,
    templateUrl: 'myModalContent.html',
    controller: 'ModalInstanceCtrl',
    size: size,
    resolve: {
      items: function() {
        return $scope.items;
      }
    }
  });

  modalInstance.result.then(function(selectedItem) {
    $scope.selected = selectedItem;
  }, function() {
    $log.info('Modal dismissed at: ' + new Date());
  });
  };

  $scope.toggleAnimation = function() {
    $scope.animationsEnabled = !$scope.animationsEnabled;
  };

});

И контроллер модели:

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $uibModalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $uibModalInstance.dismiss('cancel');
  };
});

varit05 03 авг. 2016, в 15:15

0

Это тоже хорошо. Ответ Рахула был ближе к тому, что мне действительно нужно. Проголосовал ваш ответ, так как он помог мне с некоторой дополнительной информацией. Благодарю.
noobcoder 03 авг. 2016, в 17:55

Ещё вопросы

Это тоже хорошо. Ответ Рахула был ближе к тому, что мне действительно нужно. Проголосовал ваш ответ, так как он помог мне с некоторой дополнительной информацией. Благодарю.

Rahul Arora · Accepted Answer · 2016-08-03T14-46-00.000Z

Это можно сделать двумя простыми шагами:

Шаг 1:

Вам нужно создать новый файл контроллера и определить контроллер для Modal так же, как и для MainController, как:

модальный-controller.js

(function(){
     //you can get rid of the ModalController you have defined in the same file and rather use this
     angular.module('app.mainModule')
            .controller('ModalController', ModalController);

     ModalController.$inject = ['$modalInstance', 'someVar', AnotherVar];

     function ModalController($modalInstance, someVar, AnotherVar){
          //code here
     };

})();

Шаг 2:

Вам нужно включить этот modal-controller.js в ваш base.html (или любой файл, который вы используете для включения всех файлов сценариев), чтобы Angular знал, что этот контроллер фактически существует.

Именно то, что мне было нужно. Работает отлично.