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.)

Answer 3

You can use ng-holder directives, which is available to triggering your holder.js

it's available here ng-holder

For short implementation, just include the directive and add the ngHolder into your app, here is the full code of directive which i get from official github.

(function(window, angular, undefined) {
    'use strict';
    var module = angular.module('ngHolder', []);
    module.directive('holder', [ 
        function() {
            return {
              link: function(scope, element, attrs) {
                if(attrs.holder)
                  attrs.$set('data-src', attrs.holder);
                Holder.run({images:element[0]});
              }
            };
        }]);
})(window, window.angular);

Then in your app just add ngHolder just like this

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

and in your partial template use the library like this

<img holder="holder.js/490x280/text:some text"/>

hope this help.