Angular ModalController是它自己的文件

Question

我在看看Angular ui modal with controller in separate js file中概述的答案和問題，我希望獲得相同的結果，即在其自己的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}); 
    } 
} 
})(); 

任何想法如何實現這一目標？

Answer 1

這可以通過兩個簡單的步驟完成：

第一步：

你需要做一個新的控制器文件，並定義控制器的模態，就像你爲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步：

您需要在您的base.html（或您使用的任何文件包含所有腳本文件）中包含此modal-controller.js，以便Angular知道此控制器實際存在。

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