如何从Angular控制器或模块控制toastr选项(或全局设置)

Question

基于之前关于将toastr注入您的应用程序/控制器的SO文章.我已经设置了我的app.js如下:

(function () {

   app = angular.module("app", ['breeze.angular']).value('ngToastr', toastr);

    //added toaster as factory so it can be injected into any controller
   angular.module('app').factory('ngNotifier', function (ngToastr) {
       return {
           notify: function (msg) {
               ngToastr.success(msg);
           },
           notifyError: function (msg) {
               ngToastr.error(msg);
           },
           notifyInfo: function (msg) {
               ngToastr.info(msg);
           }
       }
   });

})();

作为所述答案之一,我现在可以从任何控制器访问toastr控件.

app.controller('reportController', function ($scope, reportLibraryService, ngNotifier,  $log) {
    //report section


    var rvm = this;
    rvm.getReportList = GetReportList;
    rvm.onError = OnError;
    rvm.onReportComplete = OnReportComplete;

    $scope.userId = 1;
    GetReportList($scope.userId);

    function OnReportComplete(response) {
        $scope.reportList = response;
        ngNotifier.notify("Reports Loaded");

    };

    function OnError(reason) {
        $scope.error = "Could not fetch the data.";
        $log.error(reason);
    };

    function GetReportList(userId) {
        $log.info("Getting reports for userid " + userId)
        reportLibraryService.getAllReports($scope.userId).then(rvm.onReportComplete, rvm.onError);
    };
});

我的问题是如何覆盖默认选项？到目前为止,我尝试了两种方法.首先在html中添加一个带有选项集的toastr div,这不起作用.然后我尝试在工厂内添加它们,但它们也被忽略了.

   angular.module('app').factory('ngNotifier', function (ngToastr) {
       return {
           notify: function (msg) {
               ngToastr.success(msg);
               ngToastr.options = {
                   "closeButton": false,
                   "debug": false,
                   "progressBar": false,
                   "positionClass": "toast-bottom-right",
                   "onclick": null,
                   "showDuration": "300",
                   "hideDuration": "1000",
                   "timeOut": "5000",
                   "extendedTimeOut": "1000",
                   "showEasing": "swing",
                   "hideEasing": "linear",
                   "showMethod": "fadeIn",
                   "hideMethod": "fadeOut"
               }
           }, ...

作为第二部分是为了使用正确的工具,或者我应该使用角度烤箱,因为这是一个角度应用程序？我目前在我的应用程序中的任何其他地方都没有任何jQuery依赖项.

谢谢你的任何建议

Answer 1

对于那些试图覆盖特定通知的人，而不是简单地覆盖全局默认值，我能够做到这一点，但有一个问题。我想让错误持续存在（将 timeOut 设置为 0），同时成功消息消失。因此，对于正常的快乐路径通知，我只需使用：

toaster.success('Nothing to see here folks', 'Move along');

但对于错误，我希望该消息持续存在，以便他们可以向经理展示，写下错误消息，等等。对于原始的 toastr 项目来说这很容易，您只需传递一个覆盖选项的 JSON 对象作为最后一个参数，例如：

toastr.error('Original toastr example', 'Click to dismiss', {timeOut: 0});

Angularjs-toaster 不同，你将参数传递给 pop 函数。

但这不起作用：

toaster.pop({
           type: 'error',
           title: 'Need More Information',
           body: 'Error 42 occurred, run for the hills!',
           timeOut: 0
           });

我查看了 toaster.js 代码（我使用的是 0.4.15 版本），看起来您可以将有序参数传递给 pop 而不是 JSON 对象。这确实有效：

toaster.pop(
            'error',
            'Need More Information',
            'Error 42 occurred, run for the hills!',
            0 );

当然，我更愿意传递一个带有命名参数的对象，而不是一堆未标记的参数。我仔细查看了他们的代码，发现他们将区分大小写从 timeOut 更改为 timeout！这有效：

    toaster.pop({
           type: 'error',
           title: 'Need More Information',
           body: 'Error 42 occurred, run for the hills!',
           timeout: 0
           });