javascript - AngularJS uibModal 可重用函数

Question

我想不出正常的标题。对此感到抱歉。
所以问题是，在一个大项目中，具有大的业务逻辑，有很多模式。每个新的模态都是相同的代码，几乎没有什么变化，比如 templateUrl、 Controller 之类的。这就是现在调用弹出窗口的方式:

return uibModal.open({
                    templateUrl: current.path + 'url.html',
                    controller: 'AppController',
                    windowClass: 'PopUp',
                    size: 'md',
                    resolve: {
                        disabled: [function () {
                            return scope.disabled;
                        }]
                    }
                }).result.then(function( comment ){
                    record.comment = comment;
                })

这个例行公事永远不会结束。所以我感兴趣的是 - 减少项目中相同代码(与这种情况相同)的最佳实践是什么？您应该使用服务吗？或者只是创建全局函数？

Answer 1

在 AngularJS 中，你应该始终避免使用全局函数。服务就是为此目的而创建的。我还使用 $uibModal 并且厌倦了一遍又一遍地编写同样的东西。

我制作了一个ModalService，它使我能够抽象出许多重复的代码:

function ModalService() {
  var ModalService = this;

  ModalService.basicModal = function(options) {
                var _options = options || {};
                return $uibModal.open({
                    animation: angular.isDefined(_options.animation) ? _options.animation : true,
                    keyboard: angular.isDefined(_options.keyboard) ? _options.keyboard :  true,
                    backdrop: _options.backdrop || 'static',
                    size: _options.size || 'sm',
                    templateUrl: _options.templateUrl || 'templates/modal-message.html',  //default template in case user does not provide one
                    controller: _options.controller || ModalMessageCtrl, // a default controller in case user does not provide one
                    controllerAs: _options.controllerAs || 'vm',
                    resolve: options.resolve || {}
                });

  };

  ModalService.simpleModal = function(options) {
  ...
  };
}

您可以定义多种可以从 Controller 轻松调用的模式:

ModalService.basicModal();
ModalService.simpleModal();
// etc...

所有这些都可以接受可选参数来自定义模式:

ModalService.basicModal({
  size: 'lg'
});
ModalService.simpleModal({
  templateUrl: "my-custom-template.html",
  controller: function($scope) {
    //some custom inline controller
  }
}).result.then(function() { //do something });
// etc...