让 holder.js 与 Angular 一起工作

Posted 2023-03-05

【中文标题】让 holder.js 与 Angular 一起工作

【英文标题】：Make holder.js work with Angular

【发布时间】：2014-03-17 17:56:38

【问题描述】：

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

【问题讨论】：

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

Holder 确实存在于控制台中。

【参考方案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"/>

希望对您有所帮助。