javascript - Angular ModalController 是它自己的文件

Question

我正在查看 Angular ui modal with controller in separate js file 中概述的答案和问题我希望达到相同的结果，即将模态 Controller 放在它自己的controller.js 文件中，只是我的主 Controller 以不同的方式实现。这是我的方法。

(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

这可以通过两个简单的步骤完成:

第一步:

您需要创建一个新的 Controller 文件并为 Modal 定义 Controller ，就像为 MainController 所做的那样:

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

})();

第 2 步:

您需要将这个 modal-controller.js 包含在您的 base.html 中(或者您用来包含所有脚本文件的任何文件)，以便 Angular 知道这个 Controller 确实存在。