使持有人.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>

在 中测试

• 铬版本 32.0.1700.107 m

另请参阅：

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

Answer 2

如果您遵循另一个答案中的持有人.js项目链接拉取请求，这里有一个略微改进的解决方案 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提供此解决方案。

Answer 3

您可以使用

ng-holder指令，该指令可用于触发持有者.js

它在这里可用 ng 持有人

对于简短的实现，只需包含指令并将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"/>

希望这有帮助。