AngularJS uibModal 可重用函数

Question

我想不出正常的标题。对不起。
所以问题是在一个大项目中，有大量的业务逻辑有很多模态。每个新模式都是相同的代码，几乎没有变化，比如 templateUrl、控制器等等。这就是现在调用弹出窗口的方式：

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) {
  ...
  };
}

您可以定义多种可以从控制器轻松调用的模式：

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...

Answer 2

您可以在应用程序的配置阶段使用$uibModalProvider.options设置默认选项。

app.config(function($uibModalProvider) {
    $uibModalProvider.options = {
        windowClass: 'PopUp',
        size: 'md'
    };
});

如果您使用的是 UI Bootstrap 2.1.0 或更高版本，您还可以利用 angular 的基于组件的体系结构来删除打开模式时的一些多余内容.

给定一个组件定义如下：

app.component('myModal', {
    bindings: {close: '&', dismiss: '&', resolve: '<'},
    controller: MyModalController,
    templateUrl: 'myModal.html'
});

您可以按如下方式利用模态中的组件：

$uibModal.open({
    component: 'myModal',
    resolve: {
        // pass data to component
    }
}).result.then(function() {
    // Modal closed
}).catch(function() {
    // Modal dismissed
});

AngularJS uibModal 可重用函数

AngularJS uibModal reusable function

javascript

angularjs

angular-ui-bootstrap