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>