My angular website retrieves data from a Web API as its back end. Initially, a generic background is displayed. However, after the user logs in, the background image URL specific to the customer is fetched and utilized in the ng-style attribute.
Upon the page's initial loading, an unexpected style attribute is present, directing the background to the default image, even though it's not in the source code.
Despite updating the ng-style to reflect the correct background image URL after login, the style attribute continues to point to the default URL.
Upon manually refreshing the page (with no cache in the Chrome developer settings), the style attribute is finally updated, and the customer's background is correctly shown.
Why is Angular adding a style attribute that fails to stay in sync with the ng-style property? What could be causing this issue?
Source Code
<div class="background-div" ng-style="{'background-image': 'url({{user.profile.Customer.BackgroundImageUrl || '../images/bg.jpg'}})'}"></div>
Initial page load
<div class="background-div" ng-style="{'background-image': 'url(../images/bg.jpg)'}" style="background-image: url(http://localhost:10223/images/bg.jpg);"></div>
After login
<div class="background-div" ng-style="{'background-image': 'url(http://megacorp.com/images/vipcustomer.jpg)'}" style="background-image: url(http://localhost:10223/images/bg.jpg);"></div>
After forced no-cache refresh
<div class="background-div" ng-style="{'background-image': 'url(http://megacorp.com/images/vipcustomer.jpg)'}" style="background-image: url(http://megacorp.com/images/vipcustomer.jpg);"></div>
Fixed Code
<div class="background-div"
ng-style="{'background-image': 'url(' + (user.profile.Customer.BackgroundImageUrl || '../images/bg.jpg') + ')'}">
</div>
Reopen:
In my opinion, this question sets itself apart by focusing on HTML and avoiding delving into $digest and script. It illustrates the different stages of the page's behavior in various scenarios. However, I leave the final judgment to you :)