Question

我们在应用程序中使用angular-toastr.js。我们在所有编辑表单中都使用了以下指令：

＆＃13;

 app.directive('serverError', ['resourceFactory','spinnerService', 'toastr', function (resourceFactory,spinnerService,toastr) {
        return {
            restrict: 'A',
            controller: ['$scope', '$timeout', function ($scope, $timeout) {

                var errorToastConfig = {closeButton:true,timeOut:0,tapToDismiss:true};

                $scope.$on('sm:badRequest', function (event, data) {

                    angular.forEach(data, function (value, key) {
                        if (value.message == '') value.message = 'The ' + value.property + ' value is invalid.'
                    });

                    $scope.errors = data;
                    //$scope.alertMessage = resourceFactory.getResource('Messages', 'errorOnForm');
                    //$scope.alertType = 'error';
                    $timeout(function () {
                        spinnerService.stopSpinner();
                    }, 0);
                    toastr.clear();
                    var errorMsg = ($scope.errors[0] && $scope.errors[0].message?$scope.errors[0].message:resourceFactory.getResource('Messages', 'errorOnForm'));

                    toastr.error(errorMsg, errorToastConfig);
                    $scope.disableAction = false;
                });

＆＃13;

问题是，当页面遇到错误请求时，我会在屏幕上看到3个toastr消息，而不仅仅是1.一个来自我的控制器代码，2个来自此指令，因为此代码被执行两次角。添加toastr.clear（）并不能解决问题。理想情况下，如果错误由控制器代码处理，我根本不想运行代码。否则我想确保我只显示一个包含错误信息的toastr。你知道上面需要改变什么吗？

更新。我还可以显示我们的主要app.js代码来处理错误的请求。当我调试代码时，我可以看到指令代码触发两次，并且在执行调用时toastrs数组为空。

这是应用的代码：

＆＃13;

app.factory('badRequestInterceptor', ['$rootScope', '$q', function ($rootScope, $q) {
        return {
            'responseError': function (rejection) {
                if (rejection.status === 400) {
                    $rootScope.$broadcast("sm:badRequest", rejection.data);
                }
                return $q.reject(rejection);
            }
        };
    }]);

    app.factory('noConnectionInterceptor', ['$rootScope', '$q', function ($rootScope, $q) {
        return {
            
            'responseError': function (rejection) {
                console.dir(rejection);
                if (rejection.status === -1) {
                    $rootScope.$broadcast("sm:noConnection");
                }
                return $q.reject(rejection);
            }
        };
    }]);

＆＃13;

Answer 1

通过将preventDuplicates属性设置为true，可以防止具有相同的toasts堆栈。

来自文档：重复项根据其消息与之前的吐司匹配内容。

只需将该属性添加到errorToastConfig：

即可

var errorToastConfig = {closeButton:true,timeOut:0,tapToDismiss:true, preventDuplicates:true};

有关详细信息，请参阅docs。

仅显示1 toastr

1 个答案: