background default image if ng-style image loaded is invalid url

Question

I am adding background images to my div like this

ng-style=\"{\'background-image\' : \'url(\'+ myvariable.for.image +\')\'}\">

where myv

Answer 1

    

        
{{place.name}}
    

Using a $timeout inside that custom directive worked for me.

.directive
(
    'errBgSrc',
    function($timeout)
    {
        return {
            link: function(scope, element, attrs) 
            {
                $timeout
                (
                    function()
                    {
                        if(window.getComputedStyle(document.getElementById(attrs.id)).backgroundImage=='none'||window.getComputedStyle(document.getElementById(attrs.id)).backgroundImage==null)
                        {
                            document.getElementById(attrs.id).style.backgroundImage='url('+attrs.errBgSrc+')';
                        }
                        else
                        {
                            var image = new Image();
                            var style=window.getComputedStyle(document.getElementById(attrs.id)).backgroundImage;
                            var url=style.slice(5,style.length-2);
                            image.src = url;

                            image.onerror = function()
                            {
                                document.getElementById(attrs.id).style.backgroundImage='url('+attrs.errBgSrc+')';
                            };
                        }
                    },
                    500
                );

            }
        }
    }
)