Zeigt nur 1 toastr

Question

Wir verwenden angular-toastr.js in unserer Anwendung. Wir haben die folgende Direktive in allen Bearbeitungsformen verwendet:

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

Das Problem, das ist, wenn die Seite einen schlechten Anfrage begegnet Ich sehe 3 toastr Meldungen auf dem Bildschirm statt nur 1. One kommt von meinem Controller-Code und 2 von dieser Direktive, da dieser Code zweimal um eckig ausgeführt wird. Das Hinzufügen von toastr.clear() behebt das Problem nicht. Im Idealfall möchte ich den Code überhaupt nicht ausführen, wenn der Fehler bereits vom Code des Controllers behandelt wird. Sonst möchte ich sicherstellen, dass ich nur einen toastr mit der Fehlerinformation anzeigen werde. Siehst du, was geändert werden muss?

UPDATE. Ich kann auch unseren Hauptcode app.js anzeigen, um fehlerhafte Anfragen zu bearbeiten. Wenn ich den Code debugge, kann ich sehen, dass der Anweisungscode zweimal ausgelöst wird und das Toadrs-Array leer ist, wenn der Aufruf ausgeführt wird.

Dies ist Code der App:

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

Sie verhindern, indem Sie die preventDuplicates Eigenschaft auf true identisch Toasts stapeln zu müssen.

Von docs: Dubletten abgestimmt ist, um zum vorherigen Toast auf der Grundlage ihrer Mitteilung Inhalt.

Fügen Sie einfach die Eigenschaft auf Ihre errorToastConfig:

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

Siehe docs für weitere Informationen.