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

Question

我正在使用设置页面的背景图像：

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

我想从控制器中的范围变量读取属性，如下所示：

$scope.image="http://momentumbooks.com.au/wp-content/uploads/2013/06/space.jpg"

如何在.html页面中设置此CSS主体属性？ 在jQuery中，我可以使用.css（）。 我可以使用angulalJs做类似的事情吗？ http://docs.angularjs.org/guide/dev_guide.templates.css-styling似乎没有详细说明？

我正在尝试这种提琴，但不起作用：

http://jsfiddle.net/U3pVM/3015/

小提琴代码：

<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

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

您可以在控制器中创建一个名为$ 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"};
});

然后像这样在标记中注册应用程序和控制器：

<html ng-app="plunker">

<body ng-controller="MainCtrl" ng-style="bodyStyle">
 Demo text
</body>

</html>

我做了一个Plunkr显示整个应用程序，因为的jsfiddle是角痛。

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

您提到要从$ scope变量获取背景图像。 您可以这样做：

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

您可以执行以下操作：

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

和

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

Answer 3

其实，我所做的是调用API以在状态resolve返回图像URL：

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

API返回JSON：

res.json({url: 'someUrl'});

然后将其注入控制器，然后在控制器中调用：

angular.element('body').css('background-image', 'url(\'' + image.data.url + '\')');

这对我来说似乎很干净，因为它不需要将$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