[英]how to develop a directive AngularJS for a plugin blur image loading?
I am developing a directive for the following plugin: blurry-image-load but I have a problem, the image does not load properly, the code of my directive and my view is as follows: .. 我正在为以下插件开发指令: blurry-image-load但我有问题,图像无法正确加载,我的指令和视图的代码如下:..
` <img src="https://cdn-images-1.medium.com/freeze/max/27/1*sg-uLNm73whmdOgKlrQdZA.jpeg?q=20" data-large="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg" class="image-blur"/>
(function() {
'use strict';
angular
.module('angularTest')
.directive('imageBlur',function(){
return {
restrict: 'C',
link: function (scope, element, attrs) {
$('.image-blur').blurryLoad();
}
}
})
})();
Assuming you have more than one image and the directive is on the image elements themselves you should use the exposed element object in directive. 假设您有多个图像,并且伪指令位于图像元素本身上,则应在伪指令中使用暴露的元素对象。
Otherwise each time directive initializes you will be initializing plugin again for all elements with that class 否则,每次时间指令都会初始化,您将再次为该类的所有元素初始化插件
link: function (scope, element, attrs) {
element.blurryLoad();
}
If images are being set up using ng-src
you may also need to use $timeout
if the plugin needs to access the proper src
. 如果使用
ng-src
设置图像,则如果插件需要访问正确的src
则可能还需要使用$timeout
。 This will allow for the plugin to get initialized at end of active digest cycle and by then the src
should be set 这将允许插件在活动摘要周期结束时初始化,然后应设置
src
link: function (scope, element, attrs) {
$timeout(function(){// push this to end of digests
element.blurryLoad();
});
}
Make sure to inject $timeout
in directive if you use it 如果使用它,请确保在指令中注入
$timeout
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.