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

Posted 2023-05-08

【中文标题】如何从 Angular 控制器或模块控制 toastr 选项（或全局设置）

【英文标题】：How to control toastr options (or set them globally) from Angular controller or module

【发布时间】：2015-02-21 21:35:19

【问题描述】：

基于prior SO article 将 toastr 注入您的应用程序/控制器。我的 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"
               
           , ...

作为第二部分，toastr 是正确使用的工具，还是我应该使用 angular-toaster，因为这是一个 Angular 应用程序？我目前在我的应用程序的其他任何地方都没有任何 jQuery 依赖项。

感谢任何建议

【参考方案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
           );

【参考方案2】：

只需将toastr 选项放在app.config 中

    app.config(["toastrConfig",function(toastrConfig) 

    var options = 
          "closeButton": true,
          "debug": false,
          "newestOnTop": false,
          "progressBar": true,
          "positionClass": "toast-top-right",
          "preventDuplicates": false,
          "onclick": null,
          "showDuration": "300",
          "hideDuration": "1000",
          "timeOut": "5000",
          "extendedTimeOut": "1000",
          "showEasing": "swing",
          "hideEasing": "linear",
          "showMethod": "fadeIn",
          "hideMethod": "fadeOut"
        ;  

        angular.extend(toastrConfig, options);
      )]);

【参考方案3】：

由于“AngularJS Toaster”是“toastr”jQuery 库的 AngularJS 端口，因此在 AngularJS 应用程序中使用它肯定会更好。

我以类似的方式使用它，并且在 HTML 模板中设置选项没有问题，如下所示：

<toaster-container toaster-options="'position-class': 'toast-bottom-right', 'close-button': true, 'body-output-type': 'trustedHtml', 'showDuration': '400', 'hideDuration': '200',"></toaster-container>

【参考方案4】：

如果你有一个基本的角度控制器，你可以在那里添加你的站点范围的 angular.options。然后，如有必要，您可以覆盖 toastung 控制器中所需的选项。

toastr.options = 
  "closeButton": true,
  "debug": false,
  "newestOnTop": false,
  "progressBar": true,
  "positionClass": "toast-top-right",
  "preventDuplicates": false,
  "onclick": null,
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "5000",
  "extendedTimeOut": "1000",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
;