javascript - 在 Toastr.js 中注入(inject)/使用 Angular 服务

Question

我最近开始使用 Toastr.js 库在 Angular 网站上显示警报。我使用 Angular 服务连接到数据库并提取或发布警报，然后将生成的警报发送到 toastr 服务，效果非常好。我想自定义该库，以便当用户单击 toast 上的关闭图标时，toastr 服务将向数据库发送更新。我在自定义的 toastr.js 中有相关代码，但我不知道如何使用预先存在的 Angular 服务来进行此调用。

如何将预先存在的 Angular 服务注入(inject)/引用/使用到 toastr.js 中，以便我可以使用它的方法发布到数据库？它不使用 Angular，并且包含在 require 语法中。

作为引用，toastr.js 如下所示:

(function (define) {
    define(['jquery'], function ($) {
        return (function () {
            //code stuff here, functions
        });
}(typeof define === 'function' && define.amd ? define : function (deps, factory) {
    if (typeof module !== 'undefined' && module.exports) { //Node
        module.exports = factory(require('jquery'));
    } else {
        window.toastr = factory(window.jQuery);
    }
}));

Answer 1

使用angular-toastr插件。

app.controller('foo', function($scope, toastr) {
  toastr.info('We are open today from 10 to 22', 'Information');
});

以下是如何编辑 toastr 的配置并进行自定义

app.config(function(toastrConfig) {
  angular.extend(toastrConfig, {
    allowHtml: false,
    closeButton: false,
    closeHtml: '<button>&times;</button>',
    extendedTimeOut: 1000,
    iconClasses: {
      error: 'toast-error',
      info: 'toast-info',
      success: 'toast-success',
      warning: 'toast-warning'
    },  
    messageClass: 'toast-message',
    onHidden: null,
    onShown: null,
    onTap: null,
    progressBar: false,
    tapToDismiss: true,
    templates: {
      toast: 'directives/toast/toast.html',
      progressbar: 'directives/progressbar/progressbar.html'
    },
    timeOut: 5000,
    titleClass: 'toast-title',
    toastClass: 'toast'
  });
});

使用自定义 HTML 的 Toast

toastr.info('<input type="checkbox" checked> Success!', 'With HTML', {
  allowHtml: true
});