使holder.js与Angular一起使用

Question

当我们投入<img src="holder.js/300x200">使用时ng-app,它不起作用,但是当我们把它放在外面时它会起作用.是什么赋予了？

Answer 1

如果我们添加此指令

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

然后这两个元素都有效

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

测试中

• Chrome版本32.0.1700.107 m

也可以看看:

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

Answer 2

如果您在另一个答案中关注holder.js项目链接的pull-request,那么这里有一个稍微改进的解决方案https://github.com/imsky/holder/pull/26#issuecomment-51218083,我将在下面重现...

在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});
        }
    };
});

在HTML中:

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

这一改进允许您指定my-holder(或其他你选择)来代替的data-src,而不是将其指定为一个额外的属性.

(感谢Nick Clark和Tris Ding的解决方案.)