Question

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

如何将预先存在的Angular服务注入/引用/使用到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
});

在Toastr.js中注入/使用Angular Service

1 个答案:

使用自定义HTML