Хобрук: Ваш путь к мастерству в программировании

Как создать глобальный ионный модал, который можно показать с определенными параметрами?

Я хотел бы создать глобальный модальный режим для отчетов о проблемах в моем приложении Ionic. На нескольких страницах моего приложения у меня есть кнопка «Сообщить о проблеме», которая должна открыть модальное окно, содержащее форму.

Модальное окно одинаковое для каждой страницы (форма с описанием проблемы), однако иногда мне хочется передать ему дополнительные данные. IE:

  • Я нахожусь в представлении «itemA», нажимаю кнопку «Сообщить о проблеме», я хочу прикрепить «itemA.id» к проблеме.
  • Я на главной странице, нажимаю "Сообщить о проблеме", отправляет только описание проблемы.

Требования:

  • Я использую $ionicModal
  • Я бы не хотел загрязнять $rootScope.
  • Я хотел бы максимально избежать дублирования кода (не определяя модальное поведение в каждом контроллере..)
  • Я бы не хотел хранить эти дополнительные данные о проблемах в глобальной переменной var.
  • Я хотел бы отобразить еще один «модальный успех», когда отправка формы прошла успешно.

В идеале единственный код в каждом контроллере должен быть

.controller('Ctrl', function($scope, $issueModal){
    $scope.reportIssue = function(){
        $issueModal.show({item_id: 42});
    }
});

Я попробовал эту реализацию, но не удовлетворен по следующим причинам:

  • Он не обрабатывает события "$destroy" из родительского представления.
  • Я создаю новое модальное окно каждый раз, когда вызываю ".show()", поэтому мне нужно уничтожить модальное окно всякий раз, когда оно закрыто или "скрыто".

Буду благодарен тому, кто подскажет дорогу!


Ответы:


1

То, что вы описываете, может быть выполнено с помощью службы angulars $provide для украшения ionModalDirective.

Вот пример использования ionActionSheetDirective для переопределения шаблона, но если вы не хотите переопределять шаблон, это тоже будет хорошо, вы можете просто переопределить функцию ссылки на основе переданных аргументов. Это действительно вам решать. Ключевым моментом здесь является то, что результирующий шаблон, функция ссылки и т. д. будут предоставляться angular всякий раз, когда вы используете ionModal в своем приложении.:

angular.module('ionic').config(['$provide', function ($provide) {
  $provide.decorator('ionActionSheetDirective', ['$delegate', function ($delegate) {
    var directive = $delegate[0];

    // Here we are completely overriding the template definition for the ionActionSheetDirective
    directive.template = '' +
      '<div class="action-sheet-backdrop action-sheet-backdrop-fisdap">' +
      '<div class="action-sheet-wrapper">' +
      '<div class="action-sheet">' +
      '<div class="action-sheet-group action-sheet-group-title" ng-if="titleText">' +
      '<div class="action-sheet-title" ng-bind-html="titleText"></div>' +
      '</div>' +
      '<div class="action-sheet-group action-sheet-group-buttons">' +
      '<button class="button button-outline" ng-click="buttonClicked($index)" ng-repeat="button in buttons" ng-class="button.classes" ng-bind-html="button.text"></button>' +
      '<button class="button button-outline button-assertive destructive" ng-click="destructiveButtonClicked()" ng-bind-html="destructiveText" ng-if="destructiveText"></button>' +
      '<button class="button button-outline button-balanced" ng-click="cancel()" ng-bind-html="cancelText" ng-if="cancelText"></button>' +
      '</div>' +
      '</div>' +
      '</div>' +
      '</div>';

    // Store the old compile function
    var compile = directive.compile;

    // Overwrite the old compile function
    directive.compile = function () {

      // Get the link function from the old directive
      var link = compile.apply(this, arguments);

      // If we wanted to add some elements programatically we'd do it here
      // tElement.append('<div>Added in the decorator</div>');

      // Use the link function from the old directive for this directive
      return function () {
        link.apply(this, arguments);

        // We can extend the link function here if we wanted to
      };
    };

    return $delegate;

  }]);
}]);
27.05.2015
Новые материалы

Понимание СТРУКТУРЫ ДАННЫХ И АЛГОРИТМА.
Что такое структуры данных и алгоритмы? Термин «структура данных» используется для описания того, как данные хранятся, а алгоритм используется для описания того, как данные сжимаются. И данные, и..

Как интегрировать модель машинного обучения на ios с помощью CoreMl
С выпуском новых функций, таких как CoreML, которые упростили преобразование модели машинного обучения в модель coreML. Доступная модель машинного обучения, которую можно преобразовать в модель..

Создание успешной организации по науке о данных
"Рабочие часы" Создание успешной организации по науке о данных Как создать эффективную группу по анализу данных! Введение Это обзорная статья о том, как создать эффективную группу по..

Технологии и проблемы будущей работы
Изучение преимуществ и недостатков технологий в образовании В быстро меняющемся мире технологии являются решающим фактором в формировании будущего работы. Многие отрасли уже были..

Игорь Минар из Google приедет на #ReactiveConf2017
Мы рады сообщить еще одну замечательную новость: один из самых востребованных спикеров приезжает в Братиславу на ReactiveConf 2017 ! Возможно, нет двух других кланов разработчиков с более..

Я собираюсь научить вас Python шаг за шагом
Привет, уважаемый энтузиаст Python! 👋 Готовы погрузиться в мир Python? Сегодня я приготовил для вас кое-что интересное, что сделает ваше путешествие более приятным, чем шарик мороженого в..

Альтернатива шаблону исходящих сообщений для архитектуры микросервисов
Познакомьтесь с двухэтапным сообщением В этой статье предлагается альтернативный шаблон для папки Исходящие : двухэтапное сообщение. Он основан не на очереди сообщений, а на..