如何处理 AngularJs 模块外的模态控制器？

Question

我的应用程序使用 Angular UI 来处理模态，我想我发现了一个问题，如下所示：

我有一个调用模态控制器的控制器：

angular.module('MyApp').controller('MainCtrl', function ($scope, $modal) {
    $scope.openModal = function () {
        var myModal = $modal.open({
            animation: true,
            templateUrl: 'ModalContent.html',
            controller: ModalCtrl
        });
    };
});

我在另一个文件中也有模态控制器，作为一个简单的函数：

function ModalCtrl ($scope, $modalInstance) {
    $scope.ok = function () {
        $modalInstance.close();
    };

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

它运行良好，但我认为模态控制器必须在 AngularJs 模块内。问题是：

我可以这样做并将模态控制器保存在单独的文件中吗？
将模态控制器放在 AngularJs 模块之外是个好习惯吗？
在多个页面中重用模态控制器的最佳做法是什么？

非常感谢！

Answer 1

您传递给 $modal.open() 的对象可以注册为共享服务，模态控制器可以直接嵌入其中。

angular.module('myApp').factory('myModalConfig', function() {

    return {
        animation: true,
        templateUrl: 'ModalContent.html',
        controller: function($scope, $modalInstance) {
            $scope.ok = function () {
                $modalInstance.close();
            };

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

});

然后将其与 $modal 服务一起注入并传递。

angular.module('MyApp').controller('MainCtrl', function ($scope, $modal, myModalConfig) {
    $scope.openModal = function () {
        var myModal = $modal.open(myModalConfig);
    };
});

我自己比这更进一步，将整个东西包装到一个自定义模式服务工厂中，所以我可以只注入一个东西并打开模态，如下所示：profileModals.editProfile()。但这超出了这个答案的范围。

如何处理 AngularJs 模块外的模态控制器？

How to deal with modal controller outside AngularJs module?

angularjs

angular-ui