CODEWITHSUNDEEP
cssangularjs
Mischa
Mischa

Reputation: 2139

variable background images through angularJS ng-style

Sorry if this is a bit of a newby question. I'm trying to create a login page that has a background image, while the rest of my pages do not. I've used ng-style but I can't get the property to update on page changes. 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: ""}
}

Obviously this doesn't work because the function is only called once. I've tried using rootScope, but I can't seem to use rootScope properties in ng-style (and everywhere i look, people are advising against using rootScope for this purpose). How do I create a dynamic background? Also i'd prefer not to use a controller on my body tag, if possible.

update

The main problem i'm having is that the background image does not update when changing paths. The image is set in bodycontroller, and when logging in and changing paths it is not changed.

Per suggestion I could write a service, I've used them before but only through getters and setters, so I assume i can create a service that sends a call to a controller? Looking 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
    // somhow set bodycontroller image?
 });

and then somehow call the service when route is changed? I haven't found a way to inject services into my router config, which is what I think i would need for that.

Upvotes: 2

Views: 1014

Answers (2)

Mischa
Mischa

Reputation: 2139

So i figured out an easy way to do this with some help.

in app.js add this:

.run(function ($rootScope, $location) {
  $rootScope.$on( "$routeChangeStart", function(event, next, current) {
    $rootScope.bodyClass = $location.path().replace('/', '') + '-page';
  });
});

and change index to:

<body ng-app="myApp" ng-class="bodyClass">

and Css:

.login-page {
  background: url("someImage") no-repeat center center fixed;
}

Upvotes: 2

ajmajmajma
ajmajmajma

Reputation: 14216

IMO it would be easier to just toggle an ng-class based on location. So you could do something like -

if ($location.path() === '/login') {
$scope.isLogin = true;
} else{
$scope.isLogin = false;
}

then on the html

<body ng-app="myApp" ng-class="{'customBgClass' : isLogin }" ng-controller="bodyController">

Then just set everything you want on that css class

.customBgClass {
   background: url("http://momentumbooks.com.au/wp-content/uploads/2013/06/space.jpg") no-repeat ce;ter center fixed;
 }

Upvotes: 1

Related Questions