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模块外的模态控制器？

1 个答案: