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

我正在使用以下方法设置页面的背景图像：

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

在

你做任何事情之前，你需要一个应用程序和控制器 - 你的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是Angular的一个痛苦。

Angular 需要从比常规 JS 或 JQuery 更多的部分开始 - 当你开始时可能会令人困惑，所以我建议从 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"};
});

您可以执行以下操作：

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

和

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

实际上

，我所做的是调用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注入控制器，这最近成为

禁忌。

相关内容

最新更新

热门标签：