ng-src und onerror: Gelegentlich ein gültiges Bild

Question

Um versteckt ein Standardbild zu zeigen (anstelle eines gebrochenen Bild), wenn das Bild nicht physisch vorhanden ist, verwende ich dieses Stück Code:

<img ng-show="order.img" ng-src="{{order.img | fPath}}" onerror="this.style.display='none';"/> 
<img ng-hide="order.img" ng-src="{{'default.png' | imgPath}}" /> 

Hier sind fPath, imgPath Filter, die dem Bildnamen ein Präfix hinzufügen.

Die meiste Zeit funktioniert es gut (das Bild wird gerendert). In einigen Fällen wird das Bild jedoch nicht angezeigt. In solchen Fällen werden der Winkel Schnipsel zu diesem HTML übersetzt (man beachte die style="display: none;" im ersten img-Tag):

<img ng-show="order.img" ng-src="http://xx.s3.amazonaws.com/o/img1.jpg" onerror="this.style.display='none'" src="http://xx.s3.amazonaws.com/o/img1.jpg" style="display: none;"> 
<img ng-hide="order.img" ng-src="http://xx.s3.amazonaws.com/default.png" class="ng-hide" src="http://xx.s3.amazonaws.com/default.png" style=""> 

Frage: Was ist der Grund dafür sein könnte? Und mögliche Problemumgehungen? Ist es, dass die onerror früher als erwartet ausgelöst wird?

PS: http://xx.s3.amazonaws.com/o/img1.jpg ist ein gültiger Bildpfad und ist verfügbar.

aktualisieren: Dies ist, wie die app/route/Controller

Strecke

t_app.config(function ($stateProvider, $urlRouterProvider, $httpProvider) { 
    // ... 
    $stateProvider.state('ref', { 
     url: '/orders/:ref', 
     templateUrl: 'views/order.htm', 
     controller: 'orderController' 
    }); 
    // ... 
}); 

-Controller definiert ist

t_app.controller('orderController', ['$scope', '$stateParams', function($scope, $stateParams) { 
     // Load the order (this step takes a while) 
}]); 

Answer 1

denke ich, was mit Ihnen geschieht ist das: http://plnkr.co/edit/8JL0Op?p=preview

angular.module('app.helper', []) 
.controller('ImgController', ['$scope', '$timeout', function($scope, $timeout) { 
    $scope.img = ""; 
    $timeout(function(){ 
    $scope.img = "9c5595db-db21-4783-902a-8e80b84ae22c/6b89ed2b-878a-4f76-95c4-76ee95f47d9a.jpg"; 
    }, 1500); 
}]); 
    filter.$inject = ["$filter"]; 
    angular.module('app.helper').filter('addPath', filter); 

    function filter($filter) { 
     function filterFn(input) { 
      return "http://cdn.playbuzz.com/cdn/"+input; 
     } 

     return filterFn; 
    } 

Der Filter addiert das Präfix vor order.img festgelegt ist, so dass die img src wird nur das Präfix (bis um lodaded wird), ohne die Bildnamen, in einem falschen src führt. Ich denke, aber ich kann nicht 100% sicher sein, der Grund, weil es nur manchmal passiert ist, dass irgendwann $scope.order geladen wird (vielleicht, wenn die Ergebnisse zwischengespeichert werden oder etwas) onerror Trigger und einige Male danach.
Es ist schwer, die Ausführungsreihenfolge zu bestimmen, wenn Sie ein neueres mischen Javascript und Winkel

Sie können dies wahrscheinlich vermeiden, indem Sie einen Scheck in Ihrem Filter hinzufügen: Wenn der Wert auf den Filter geleitet null, nicht definiert oder eine leere Zeichenfolge dann Rückkehr in diesem Fall null. So etwas wie dieses

return typeof input === "undefined" || input === null || input === "" ? null : "http://cdn.playbuzz.com/cdn/"+input;