Showing only 1 toastr

Question

We're using angular-toastr.js in our application. We have the following directive used in all our edit forms:

 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;
                });
   

The problem is that when the page encounters a bad request I see 3 toastr messages on the screen instead of just 1. One is coming from my controller's code and 2 from this directive as this code is executed twice by angular. Adding toastr.clear() doesn't resolve the issue. Ideally, I don't want to run the code at all if the error is handled by the controller's code already. Otherwise I want to make sure I only display one toastr with the error information. Do you see what needs to be changed in the above?

UPDATE. I can also show our main app.js code to handle bad requests. When I am debugging the code I can see that the directive code fires twice and the toastrs array is empty when the call is executed.

This is app's code:

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);
            }
        };
    }]);

Answer 1

You can prevent having identical toasts stack by setting the preventDuplicates property to true.

From docs: Duplicates are matched to the previous toast based on their message content.

Just add the property to your errorToastConfig:

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

See docs for more information.