I am looking to refresh the background image of a div using the same URL within a directive. Upon loading my view, I utilized this directive to display the image as a background for the div.
app.directive('backImg', function () {
var directive = {
link: link,
restrict: 'A'
};
return directive;
function link(scope, element, attrs) {
attrs.$observe('backImg',function(n,o){
if(!n) return;
element.css({
'background-image': 'url(' + n + ')',
'background-size': 'cover'
});
},true);
}
});
The HTML element is structured like this
<div data-ng-if="vm.user.user_id!==undefined" data-back-img="{{vm.serviceUrl}}/image/user/{{vm.user.user_id}}"
class="user-img-div" style="width:100%; height:100%;"></div>
While it functions properly initially, when a user updates their profile image, I want to refresh the background image with the same URL. How can I achieve this? The current code doesn't appear to be effective.