Having the 2 urls on the directive seems a touch overcomplicated. What I think is better is to write a directive that works like:
<img ng-src="{{bannerUrl}}" spinner-on-load />
And the directive can watch ng-src
and (for example) set visibility:false with a spinner until the image has loaded. So something like:
scope: {
ngSrc: '='
},
link: function(scope, element) {
element.on('load', function() {
// Set visibility: true + remove spinner overlay
});
scope.$watch('ngSrc', function() {
// Set visibility: false + inject temporary spinner overlay
});
}
This way the element behaves very much like a standard img with an ng-src
attribute, just with a bit of extra behaviour bolted on.