How to set body attribute in css using angularjs?
Question
I'm setting the background image of a page using :
body {
background: url(http://momentumbooks.com.au/wp-content/uploads/2013/06/space.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
text-align: center;
}
I would like to read a property from a scoped variable in my controller that looks like this:
$scope.image="http://momentumbooks.com.au/wp-content/uploads/2013/06/space.jpg"
How can I set this css body attribute from within my .html page ? In jQuery I could .css(). Can I do something similar using angulalJs? http://docs.angularjs.org/guide/dev_guide.templates.css-styling doesn't seem to detail this ?
I'm trying this fiddle but does not work :
http://jsfiddle.net/U3pVM/3015/
fiddle code :
<body ng-style="getBodyStyle()">
</body>
$scope.getBodyStyle = function () {
return {background: "url(http://momentumbooks.com.au/wp-content/uploads/2013/06/space.jpg) no-repeat center center fixed;"};
};
3 answers
solution1
3 ACCPTED 2014-02-15 01:16:05
You need an app & controller before you can do anything- your JSFiddle is failing because you've got no controller, and you never define $scope.
You can create a $scope variable called $scope.bodyStyle in a controller, like this:
app.controller('MainCtrl', function($scope) {
$scope.bodyStyle = {background: "url(http://momentumbooks.com.au/wp- content/uploads/2013/06/space.jpg) no-repeat center center fixed"};
});
And then register the app & the controller in the mark-up like this:
<html ng-app="plunker">
<body ng-controller="MainCtrl" ng-style="bodyStyle">
Demo text
</body>
</html>
I made a Plunkr showing the whole app, because JSFiddle is a pain with Angular.
Angular needs to start with a lot more pieces working together than regular JS or JQuery- it can be confusing when you get started, so I recommend starting out with the AngularJS seed app .
You mention that you want to get the background image from a $scope variable. You could do that like this:
app.controller('MainCtrl', function($scope) {
$scope.image="http://momentumbooks.com.au/wp-content/uploads/2013/06/space.jpg";
$scope.bodyStyle = {background: "url(" + $scope.image + ") no-repeat center center fixed"};
});
solution2
1 2014-02-15 00:01:51
You can do something like:
<body ng-style="getBodyStyle()">`
and
$scope.getBodyStyle = function () {
return {background: myData};
};
solution3
1 2016-02-17 11:45:36
Actually, what I did is call API to return image URL in state resolve :
resolve: {
'image': ['$http', function($http) {
return $http.get('/api/image');
}]
}
The API returns JSON:
res.json({url: 'someUrl'});
Then you inject that to controller and in controller just call:
angular.element('body').css('background-image', 'url(\'' + image.data.url + '\')');
This seems clean to me as it does not need to inject $scope into controller which became a no-no recently.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.