Image 404 error replace image default

Image 404 error replace image default

by Ankit Patidar

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
    <div ng-repeat="image in images">
        <img ng-src="{{image}}" error-class="Hello" on-error-src="http://google.com/favicon.ico"/>
    </div>
    <img ng-src="{{image}}"  on-error-src="http://google.com/favicon.ico"/>
</div>

JavaScript

var myApp = angular.module('myApp',[]);

myApp.directive('onErrorSrc', function() {
  return {
    link: function(scope, element, attrs) {
      element.bind('error', function() {
        if (attrs.src != attrs.onErrorSrc) {
          attrs.$set('src', attrs.onErrorSrc);
          if(attrs.errorClass){
          	attrs.$set('class', 'hello');
          }
        }
      });
    }
  }
});

myApp.controller("MyCtrl", function($scope) {
    $scope.images = [
        'http://upload.wikimedia.org/wikipedia/en/6/66/SallyCD.jpg',
        'any.png', //WRONG URL
        'all'
    ];
});