Excuse me if this is a basic question. I am working on designing a login page with a background image, while the other pages don't have this background. I tried using ng-style but couldn't get the style to update when navigating between pages. In my index.html:
<body ng-app="myApp" ng-style="bodyStyle" ng-controller="bodyController">
//content
</body
bodycontroller:
var image="http://momentumbooks.com.au/wp-content/uploads/2013/06/space.jpg";
if ($location.path() === '/login') {
$scope.bodyStyle = {background: "url(" + image + ") no-repeat center center fixed"};
} else{
$scope.bodyStyle={background: ""}
}
This approach doesn't work because the function is only called once. I also attempted using rootScope, however, I couldn't use rootScope properties in ng-style as advised by others. How can I create a dynamic background without using a controller on the body tag?
update
The issue I'm facing is that the background image does not update when changing paths. The image is set in bodycontroller and remains unchanged while logging in and switching paths.
One suggestion is to create a service. I've used services before for getters and setters, so I assume I can create one that interacts with a controller. It would look something like this:
<body ng-app="myApp" ng-style="bodyStyle" ng-controller="bodyController">
//content
</body
bodycontroller
var image=??;
$scope.bodyStyle = {background: "url(" + image + ") no-repeat center
some service
.service('backgroundService', function (image) {
var backgroundImage = image
// somehow set bodycontroller's image?
});
and then somehow call the service when the route is changed? I haven't figured out how to inject services into my router config, which I believe is necessary for this setup.