【Angular.js/holder.js】ng-viewなどで読み込んだテンプレート内のダミー画像を正常にレンダリングさせる。

holder.jsはお手軽にダミー画像を配置できるのでワイヤー作成時など本当に重宝している。
しかしそのまんまAngularJSと組み合わせただけだと、holder.jsのスクリプトが正常に作動してくれないことが判明。

下記のようなディレクティブを定義してやることで正常にレンダリングすることができた。

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

これを下記のようにして使えばOK。

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