Javascript 使holder.js与Angular一起工作

当我们把

放入

ng应用程序时，它不工作，但当我们把它放在外面时，它会工作。如果我们添加此指令，会给出什么

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

另见：

如果您在另一个答案中遵循holder.js项目链接的pull请求，这里有一个稍微改进的解决方案，我将在下面重现

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

而不是将其指定为额外属性

（此解决方案归功于Nick Clark和Tris Ding。）
您可以使用
ng holder
指令，该指令可用于触发holder.js

这里有

简而言之，只需包含指令并将
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"/>

在您的部分模板中，使用如下库

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

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



希望有帮助。
您能确保脚本加载正确吗？也许可以查看控制台中是否存在
Holder
对象？从文档和阅读GitHub上的代码来看，
应该可以工作……控制台中确实存在Holder。这就是现在的解决方案。