Make holder.js work with Angular

Question

When we put <img src="holder.js/300x200"> into an ng-app, it doesn't work, but when we put it outside it does. What gives?

Answer 1

If we add this directive

app.directive('holderFix', function () {
    return {
        link: function (scope, element, attrs) {
            Holder.run({ images: element[0], nocss: true });
        }
    };
});

Then both these elements work

<img data-src="holder.js/300x200" holder-fix>
<img src="holder.js/300x200" holder-fix>

Tested in

• Chrome Version 32.0.1700.107 m

See also:

https://github.com/imsky/holder/pull/26

Answer 2

If you follow the holder.js project linked pull-request in the other answer, there's a slightly improved solution here https://github.com/imsky/holder/pull/26#issuecomment-51218083 which I will reproduce below...

In Javascript:

angular.module('MyModule').directive('myHolder', function() {
    return {
        link: function(scope, element, attrs) {
            attrs.$set('data-src', attrs.myHolder);
            Holder.run({images:element.get(0), nocss:true});
        }
    };
});

And in HTML:

<img my-holder="holder.js/200x300">

This improvement allows you to specify my-holder (or whatever else you choose) in place of data-src rather than specifying it as an extra attribute.

(Credit to Nick Clark and Tris Ding for this solution.)