variable background images through angularJS ng-style

Question

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.

So to clarify, do you want to have the background change when the $location.path() changes? Or after certain times? — Guinn
– Guinn, Commented Jun 22, 2015 at 13:58
When the location.path() changes. Basically I want a background for the login page but not anywhere else. So I figured the easiest way would be to do that based on the current path. But Other suggestions are welcome — Mischa
– Mischa, Commented Jun 22, 2015 at 14:01
You can set the background to a div inside the login view, instead of the body... but if you still trying this way you can check this directive stackoverflow.com/a/15537359/1666722 — Facundo Pedrazzini
– Facundo Pedrazzini, Commented Jun 22, 2015 at 14:04
I've tried a seperate div. But because the login page is ng-view, the div is inside the body and even inside a container so I can't set background to the entire page. The link has the same problem I've found everywhere. The ng-style is not changed when I log in, only on page refresh. — Mischa
– Mischa, Commented Jun 22, 2015 at 14:08
I recommend you to change the structure of your layout, and put the container div inside the ng-view so you can add content with full width... but if you dont want to do it check the directive I paste you in my last comment (is the answer of mythz with 34 points) — Facundo Pedrazzini
– Facundo Pedrazzini, Commented Jun 22, 2015 at 14:12

Mischa · Accepted Answer · 2015-06-22 15:30:07Z

2

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;
}

answered Jun 22, 2015 at 15:30

Mischa

2,1494 gold badges25 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ajmajmajma · Accepted Answer · 2015-06-22 13:58:47Z

1

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;
 }

answered Jun 22, 2015 at 13:58

ajmajmajma

14.3k25 gold badges83 silver badges139 bronze badges

5 Comments

Mischa Over a year ago

Unfortunately this doesn't solve my main problem. The controller is only called once when the app is loaded (and on refresh). So the $scope.isLogin is not changed when a user logs in.

ajmajmajma Over a year ago

@Mischa that is a separate problem then. You would need a service to handle all of this. My recommendation is a service that is injected into each instance that checks this each time you swap a page. If you're using routing this is pretty much built in.

Mischa Over a year ago

Correct, but it's the main problem i'm having. I've tried making a service but couldn't get it to work. So if you have an example i'd be grateful.

ajmajmajma Over a year ago

@Mischa I did not interpret that from how you worded your question. You either want to use routing (what are you using for routing now?) I think ui-router has a way to do this very easily. Otherwise you want to create a new module and inject it in where ever you are using it, that service would do your logic ($location.path() === '/login') and send back something to wherever you have it injected. Right now you have the logic inside 1 scope which is in the login screen, so yes it will not work elsewhere. It really depends how you set up your app, but I would recommend a service.

ajmajmajma Over a year ago

@Mischa so you would create a service - docs.angularjs.org/guide/services . Probably just a .service because you only need a singleton to check the url once on landing, that would send the result into the controllers and se whatever you needed.

Collectives™ on Stack Overflow

variable background images through angularJS ng-style

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related