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

Question

我有点像Angular的菜鸟。 在我的一个控制器中，我在toastr上设置一些全局选项并调用toastr 通过工厂暴露的方法（tndNotifier）。这似乎工作正常，但我不喜欢 事实是，当我点击＆＃34;继续＆＃34;以外的任何其他内容时;按钮或＆＃34; x＆＃34;在toastr 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 和更新的控制器。

旁注：我应该将吐司通知用作模态吗？

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