如何设置使用angularjs CSS属性的身体？ [英] How to set body attribute in css using angularjs?
问题描述
我用设置页面的背景图像：
{体
背景：网址（http://momentumbooks.com.au/wp-content/uploads/2013/06/space.jpg）不重复中心中心固定;
-webkit-背景大小：盖;
-moz-背景大小：盖;
-o-背景大小：盖;
背景大小：盖;
文本对齐：中心;
}
我想从我的控制器看起来像这样一个范围变量读取属性：
$ 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/
小提琴code：
＆LT;机身NG风格=getBodyStyle（）＆GT;
＆LT; /身体GT;$ scope.getBodyStyle =功能（）{
返回{背景：URL（http://momentumbooks.com.au/wp-content/uploads/2013/06/space.jpg）不重复中心中心固定;};
};
您需要的应用程序和放大器;控制器之前，你可以做任何东西 - 你的jsfiddle失败，因为你有没有控制器，你永远不定义$范围。
您可以创建一个名为$ scope.bodyStyle在控制器的$范围的变量，像这样的：
app.controller（'MainCtrl'，函数（$范围）{
$ scope.bodyStyle = {背景：URL（http://momentumbooks.com.au/wp-内容/上传/ 2013/06 / space.jpg）固定不重复中心中心};
}）;
，然后注册应用程序和放大器;控制器的加价是这样的：
＆LT; HTML NG-应用=plunker＆GT;＆LT;机身NG控制器=MainCtrlNG式=bodyStyle＆GT;
演示文本
＆LT; /身体GT;＆LT; / HTML＆GT;
我做了一个 Plunkr 显示整个应用程序，因为的jsfiddle是疼痛角。
角需求开始与更多的作品比普通JS或JQuery-共同努力它可以是混乱，当你上手，所以我推荐开始接触的的 AngularJS种子应用。
您提到，你想从$范围的变量得到的背景图像。你可以做到这一点是这样的：
app.controller（'MainCtrl'，函数（$范围）{
$ scope.image =http://momentumbooks.com.au/wp-content/uploads/2013/06/space.jpg;
$ scope.bodyStyle = {背景：URL（+ $ scope.image +）不重复中心中心固定的};
}）;
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;"};
};
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"};
});
这篇关于如何设置使用angularjs CSS属性的身体？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
