如何使用angularjs在CSS中设置body属性？

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 ? 如何在.html页面中设置此CSS主体属性？ In jQuery I could .css(). 在jQuery中，我可以使用.css（）。 Can I do something similar using angulalJs? 我可以使用angulalJs做类似的事情吗？ http://docs.angularjs.org/guide/dev_guide.templates.css-styling doesn't seem to detail this ? http://docs.angularjs.org/guide/dev_guide.templates.css-styling似乎没有详细说明？

I'm trying this fiddle but does not work : 我正在尝试这种提琴，但不起作用：

http://jsfiddle.net/U3pVM/3015/ 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;"};
};

Answer 1

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. 在执行任何操作之前，您需要一个应用程序和控制器-您的JSFiddle失败了，因为您没有控制器，而且您从未定义$ scope。

You can create a $scope variable called $scope.bodyStyle in a controller, like this: 您可以在控制器中创建一个名为$ scope.bodyStyle的$ scope变量，如下所示：

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. 我做了一个Plunkr显示整个应用程序，因为的jsfiddle是角痛。

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 . 与常规的JS或JQuery相比，Angular需要更多的协同工作-开始时可能会令人困惑，因此我建议从AngularJS种子应用开始。

You mention that you want to get the background image from a $scope variable. 您提到要从$ scope变量获取背景图像。 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"};
});

Answer 2

You can do something like: 您可以执行以下操作：

<body ng-style="getBodyStyle()">`

and 和

$scope.getBodyStyle = function () {
    return {background: myData};
};

Answer 3

Actually, what I did is call API to return image URL in state resolve : 其实，我所做的是调用API以在状态resolve返回图像URL：

resolve: {
   'image': ['$http', function($http) {
        return $http.get('/api/image');
    }]
}

The API returns JSON: API返回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. 这对我来说似乎很干净，因为它不需要将$scope注入到控制器中，这在最近成为了禁忌。

如何使用angularjs在CSS中设置body属性？

问题描述

3 个解决方案

解决方案1
3 已采纳 2014-02-15 01:16:05

解决方案2
1 2014-02-15 00:01:51

解决方案3
1 2016-02-17 11:45:36

如何使用angularjs在CSS中设置body属性？

问题描述

3 个解决方案

解决方案1 3 已采纳 2014-02-15 01:16:05

解决方案2 1 2014-02-15 00:01:51

解决方案3 1 2016-02-17 11:45:36

解决方案1
3 已采纳 2014-02-15 01:16:05

解决方案2
1 2014-02-15 00:01:51

解决方案3
1 2016-02-17 11:45:36