Я немного привязан к Угловому. Внутри одного из моих контроллеров я устанавливаю некоторые глобальные параметры в 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 иллюстрирует то, что я описал выше.
Глобальный 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 с обновленным контроллером.
Seth Flowers подчеркивает, что вы, вероятно, не должны использовать библиотеку уведомлений, чтобы генерировать то, что выглядит как модальные в UI/UX. Однако, если он ходит как утка, говорит как утка, то это утка. Если у него есть все необходимые функции, не требуя от него дерьма, я уверен, что это может быть безопасно использовать. Я бы рекомендовал посмотреть на компоненты ui-modal, которые есть там или другие варианты на http://ngmodules.org/.