在 AngularJS 中使用 toastr 进行确认对话框

Question

我对 Angular 有点陌生。 在我的一个控制器中，我在 toastr 上设置了一些全局选项并调用了一个 toastr 通过工厂 (tndNotifier) 公开的方法。这似乎工作正常，但我不喜欢 事实是，当我单击 toastr 中的“继续”按钮或“x”以外的任何内容时 div，我最终调用了 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 相似的外观（和行为），但我不知道最好的方法。

This jsfiddle 说明了我上面描述的内容。

Answer 1

根据你的小提琴：

您正在设置配置对象的 toastr 全局与您的 tndToastr value 提供程序不同，因此在 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 控制器。

旁注：我应该使用 toast 通知作为模式吗？

Seth Flowers 提出了一个很好的观点，即您可能不应该使用通知库来生成在 UI/UX 中看起来像模态的内容。但是，如果它像鸭子一样走路，像鸭子一样说话，那么它就是鸭子。如果它具有您需要的所有功能而不必使用它，那么我相信它可以安全使用。我建议查看现有的 ui-modal 组件或 http://ngmodules.org/ 上的其他选项。