directive for no image

by Tapan Acharjee

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="app" >
    Name: <input ng-model="name">
    <span>{{name}}</span>
    <img no-image ng-src="{product.imageUrl}}" />
</div>

JavaScript

var app = angular.module('app', []);
app.factory('settings', function() {
    return {
        noImageUrl: "http://google.com/favicon.ico"
    };
});

app.directive('noImage', function (settings) {

    var setDefaultImage = function (el) {
        el.attr('src', settings.noImageUrl);
    };

    return {
        restrict: 'A',
        link: function (scope, el, attr) {
            scope.$watch(function() {
                return attr.ngSrc;
            }, function () {
                var src = attr.ngSrc;

                if (!src) {
                    setDefaultImage(el);
                }
            });

            el.bind('error', function() { setDefaultImage(el); });
        }
    };
});