angularjs – 如何从Angular控制器或模块控制toastr选项(或全局

发布时间：2020-12-17 06:55:20 所属栏目：安全来源：网络整理

导读：基于 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

基于 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"
               }
           },...

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

谢谢你的任何建议

解决方法

对于那些试图覆盖特定通知的人,而不是简单地覆盖全局的默认值,我能够做到这一点,但有一个问题.我希望在成功消息消失时使错误持续存在(将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不同,你将params传递给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对象.这个DID工作：

toaster.pop(
            'error','Need More Information','Error 42 occurred,0 );

当然,我更喜欢将一个带有命名参数的对象传递给一堆未标记的参数.我仔细看了看他们的代码,看到他们将案例敏感度从timeOut更改为超时！这有效：

toaster.pop({
           type: 'error',timeout: 0
           });

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!