让holder.js与Angular兼容

Question

当我们将 <img src="holder.js/300x200"> 放入一个ng-app时，它无法工作，但是当我们将其放在外面时就可以。这是为什么？

- Shaun Luttin

---

你能确保脚本正常加载吗？也许可以在控制台中查看 Holder 对象是否存在？根据文档和在 GitHub 上阅读代码，<img src="holder.js/300x200"> 应该可以工作... - Anthony Chu

控制台中存在 Holder。 - Shaun Luttin

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

- Shaun Luttin

Answer 2

如果你按照其他答案中链接的holder.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">

这个更新允许你在data-src的位置上指定my-holder（可自行选择其他名称），而无需再指定额外的属性。(感谢Nick Clark和Tris Ding提供的解决方案。)

- caprica

---

这是目前由holder.js官方文档提供的解决方案（https://github.com/imsky/holder#using-with-angularjs）。 - Gabby Paolucci

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"/>

希望这可以帮到你。

- Aditya Kresna Permana