Angular ModalController eine eigene Datei zu sein

Question

Ich schaute auf die Antwort und Frage in Angular ui modal with controller in separate js file skizziert und ich möchte das gleiche Ergebnis erzielen, das ist der modale Controller in seiner eigenen controller.js Datei, nur dass mein Hauptcontroller ist anders umgesetzt. Hier ist, wie ich es habe.

(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}); 
    } 
} 
})(); 

Irgendeine Idee, wie man das erreicht?

Answer 1

Dies kann in zwei einfachen Schritten erfolgen:

Schritt 1:

Sie benötigen eine neue Controller-Datei erstellen und Controller für Modal definieren genauso wie für MainController tat, wie:

modal-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 
    }; 

})(); 

Schritt2:

Sie müssen modal-controller.js in Ihre base.html (oder die Datei, die Sie verwenden, um alle Skriptdateien einzuschließen) einschließen, damit Angular weiß, dass dieser Controller tatsächlich existiert.

Answer 2

Wahrscheinlich Wenn ich Ihre Frage richtig verstanden habe, ich glaube, Sie sind für diese Suche:

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

Haupt Controller:

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; 
    }; 

}); 

und Modell Controller:

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