当我们将
<img src="holder.js/300x200">
放入一个ng-app
时,它无法工作,但是当我们将其放在外面时就可以。这是为什么?<img src="holder.js/300x200">
放入一个ng-app
时,它无法工作,但是当我们将其放在外面时就可以。这是为什么?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>
测试通过:
另请参阅:
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提供的解决方案。)您可以使用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);
var MyApp = angular.module('MyApp', ['ngHolder']);
在你的部分模板中,可以像这样使用该库
<img holder="holder.js/490x280/text:some text"/>
Holder
对象是否存在?根据文档和在 GitHub 上阅读代码,<img src="holder.js/300x200">
应该可以工作... - Anthony Chu