loading spinner image in div

Question

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 ..

aman sharma · Answer

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(loadImagefunction(){ return{ link:function(scopeelmattrs){ 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 Sahoo · Answer

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.