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（或您选择的任何其他内容） {em} data-src，而不是将其指定为额外属性。

（感谢Nick Clark和Tris Ding的解决方案。）

Answer 3

您可以使用ng-holder指令来触发holder.js

可在此处ng-holder

对于简短的实现，只需包含该指令并将ngHolder添加到您的应用程序中，这是我从官方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);

然后在您的应用中添加ngHolder就像这样

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

并在您的部分模板中使用像这样的库

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

希望这有帮助。

使holder.js与Angular一起使用

3 个答案: