让 holder.js 与 Angular 一起工作答案

【问题标题】：Make holder.js work with Angular让 holder.js 与 Angular 一起工作
【发布时间】：2014-03-17 17:56:38
【问题描述】：

当我们将<img src="holder.js/300x200"> 放入ng-app 时，它不起作用，但是当我们把它放到外面时它会起作用。什么给了？

【问题讨论】：

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

标签： javascript image angularjs placeholder

【解决方案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

【讨论】：

【解决方案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。）

【讨论】：

这就是现在的解决方案given by holder.js's official documentation。

【解决方案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"/>

希望对您有所帮助。

【讨论】：