Angular ModalControllerを独自のファイルにする

Question

Angular ui modal with controller in separate js fileで概説されている答えと質問を見ていましたが、同じ結果を達成したいと思います。それは自分のcontroller.jsファイルにmodalコントローラを持っています。異なる方法で実装されています。ここで私はそれを持っている方法です。

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

どのようにこれを達成するためのアイデアですか？私が正しくあなたの質問を理解していれば

Answer 1

これは2つの簡単なステップで行うことができます：

ステップ1：

モーダル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：

あなたは、あなたのbase.htmlにこのモーダル-controller.jsを含める必要があり角度は、このコントローラが実際に存在することを知っているように（またはいずれかのファイルは、すべてのスクリプトファイルを含めるために使用されています）。

Answer 2

はおそらく、私はあなたがこのために探していると思う：

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