loading spinner image in div

aman sharma

i want to show spiner loading image inside div using angular js .

i want to do with custom directive . after gettting the real image that spiiner should be replaced or hidden ...please tell what should i have to do ..

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

aman sharma10y ago
that i have done .but not in this . i am creating a directive and set the back ground image of div of sppiner . when this directive is exuted . after that i am relacing with orignal image ..

see here is code :
campaigns.directive("loadImage",function(){
return{
link:function(scope,elm,attrs){
var image, loadImage;
image =null;

var image = new Image();
loadImage =function(){

elm.css({ backgroundImage: 'url("/campaigns/static/images/loading_spinner.gif ")'})

image.onload = function () {
elm.css({backgroundImage: 'url("' + attrs.loadImage + '")'});
};
image.src = attrs.loadImage;
}

scope.$watch((function() {
return attrs.loadImage;
}), function(newVal, oldVal) {

if (oldVal !== newVal) {
loadImage();
}
});
if(attrs.loadImage!=null && attrs.loadImage.length != 0){
loadImage();
}
}
}
})
Pradeep Sahoo10y ago
Hi Aman, Approach like this

Create a custom directive as and use that directive in the html

app.directive("spinner", function(){
return: {
restrict: 'E',
scope: {enable:"="},
template:
}
});

Hope this helps.