AngularJS uibModal многоразовая функция - PullRequest
Новая
       9

AngularJS uibModal многоразовая функция

0 голосов
/ 01 мая 2018

Я не мог придумать нормальный заголовок. Простите за это.
Таким образом, проблема в том, что в большом проекте с большой бизнес-логикой существует много модальностей. И каждый новый модал - это один и тот же код с небольшими изменениями, как 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;
                })

И эта рутина никогда не заканчивается. Итак, что меня интересует, так это то, что лучше всего использовать один и тот же код (в той же ситуации) в вашем проекте? Вы должны использовать сервис? Или просто создать глобальную функцию?

Ответы [ 2 ]

0 голосов
/ 01 мая 2018

Вы можете использовать $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
});
0 голосов
/ 01 мая 2018

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