Использование toastr в AngularJS для диалога подтверждения

0

Я немного привязан к Угловому. Внутри одного из моих контроллеров я устанавливаю некоторые глобальные параметры в toastr и вызывая метод toastr, открытый через фабрику (tndNotifier). Кажется, что это работает нормально, но мне не нравится то, что когда я нажимаю на кнопку "Продолжить" или "x" внутри div toastr, я в конечном итоге вызываю событие onclick. Я пытаюсь игнорировать это прямо так, чтобы пользователь не стал непреднамеренно вызывать событие onclick. Похоже, это может быть невозможно, но я могу ошибаться. Кроме того, нажатие кнопки не отменяет экземпляр toastr.

  promptForDeleteServiceLog: function(serviceLog) {
      // I am sure I can hide toastr behind some other abstraction to avoid a direct reference
      toastr.options = {
        tapToDismiss: false,
        closeButton: true,
        onclick: function(object) {
          $scope.tndServiceLogList.deleteServiceLog(serviceLog);
        }
      };
      // Embedding markup here makes me feel dirty
      tndNotifier.warn('You are about to delete ' + serviceLog.description + '. Click \'Continue\' to delete or \'x\' to cancel.' +
          ' <br><br><button class="btn btn-warning">Continue</button>');
    }

Завод определяется как таковой:

angular.module('app').value('tndToastr', toastr);

angular.module('app').factory('tndNotifier', function(tndToastr) {
  return {
    notify: function(msg) {
      tndToastr.success(msg);
      console.log(msg);
    },
    warn: function(msg) {
      tndToastr.warning(msg);
      console.log(msg);
    },
    error: function(msg) {
      tndToastr.error(msg);
      console.log(msg);
    }
  }
});

Причина, по которой я использую toastr, заключается в том, что он предлагает мне общий механизм уведомления. Должен ли я использовать toastr таким образом (для диалоговых окон подтверждения) или я должен вместо этого написать настраиваемую директиву для всплытия div без фактического использования toastr? Каков предпочтительный подход для моего варианта использования?

У меня есть идея, что, возможно, я должен использовать jQuery в директиве, чтобы попытаться достичь подобного вида и поведения (и поведения) в toastr, но я не знаю лучшего подхода.

Этот jsfiddle иллюстрирует то, что я описал выше.

  • 2
    toastr не предназначен для ввода. Это библиотека уведомлений. Вы должны использовать что-то вроде угловой директивы UI bootstraps.
  • 0
    Имеет много смысла. Я начал замечать ошибку, когда пытался форсировать решение через toastr со встроенной разметкой. Я еще не использовал модальный угловой загрузочный интерфейс, так что я попробую.
Показать ещё 1 комментарий
Теги:
toastr

1 ответ

1

Основываясь на вашей скрипке:

Глобальный toastr который вы устанавливаете для своего объекта конфигурации, не совпадает с вашим tndToastr value tndToastr, поэтому поэтому вызов событий на tndToaster не будет учитывать конфигурацию, которую вы передали ей.

// Wrong Way. 
myApp.controller('MyCtrl', function ($scope, tndNotifier) {
  $scope.tndServiceLogList = {
    promptForDeleteServiceLog: function (serviceLog) {
      toastr.options = { //This is not the same toastr variable as your injectable tndToastr that you defined, so therefore calling events on tndToaster wont resepct this config.
        tapToDismiss: false,
        closeButton: true
      };
      tndNotifier.warn('You are about to delete  FOO. Click \'Continue\' to delete or \'x\' to cancel.' +
        ' <br><br><button class="btn btn-warning">Continue</button>');
    }  };
});

Внесите tndToaster и настройте его:

Если вы вместо этого добавите свое значение, как показано ниже, а затем вызовите конфигурацию на нем, вы увидите нужное поведение, которое вы ищете.

// Way that does work in updated fiddle
myApp.controller('MyCtrl', function ($scope, tndNotifier, tndToastr) {
  $scope.tndServiceLogList = {
    promptForDeleteServiceLog: function (serviceLog) {
      tndToastr.options = {
        tapToDismiss: false,
        closeButton: true
      };
      tndNotifier.warn('You are about to delete  FOO. Click \'Continue\' to delete or \'x\' to cancel.' +
        ' <br><br><button class="btn btn-warning">Continue</button>');
    }  };
});

Вот обновленный FIDDLE с обновленным контроллером.

Sidenote: Должен ли я использовать уведомления для тостов как модальные?

Seth Flowers подчеркивает, что вы, вероятно, не должны использовать библиотеку уведомлений, чтобы генерировать то, что выглядит как модальные в UI/UX. Однако, если он ходит как утка, говорит как утка, то это утка. Если у него есть все необходимые функции, не требуя от него дерьма, я уверен, что это может быть безопасно использовать. Я бы рекомендовал посмотреть на компоненты ui-modal, которые есть там или другие варианты на http://ngmodules.org/.

Поделиться
  • 0
    Спасибо за пример и объяснение. Однако я заметил то же самое поведение с добавленной ссылкой на провайдера tndToastr и без нее (toastr не отключается автоматически). Все это кажется немного неуклюжим, как я и ожидал. Поэтому я, скорее всего, перейду к использованию модального углового загрузчика пользовательского интерфейса, поскольку понял, что в своем приложении уже использую угловую загрузочный интерфейс пользовательского интерфейса для сборщиков дат.
  • 0
    Если бы вы могли подтвердить, что приведенный пример не работает, я могу продолжить и принять ваш ответ. Я просто не хочу, чтобы кто-то еще предполагал, что toastr каким-либо образом является рабочим решением проблемы модального диалога подтверждения.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню