Inject/use Angular 服务于 Toastr.js

Question

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

我怎样才能 inject/reference/use 预先存在的 Angular 服务进入 toastr.js 以便我可以使用它的方法 post 到数据库？它不使用 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

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

Inject/use Angular 服务于 Toastr.js

Inject/use Angular Service in Toastr.js

javascript

dependency-injection

angularjs

toastr

自定义吐司HTML