不同页面背景的body标签上的Angular ng风格？
Posted
技术标签:
【中文标题】不同页面背景的body标签上的Angular ng风格？【英文标题】：Angular ng-style on body tag for different page backgrounds? 【发布时间】：2016-09-14 09:52:49 【问题描述】：我是 Angular 和 ngroute 的新手，我正在尝试使用 ng-style 为网站的每个页面设置不同的图像背景。目前它设置所有网站页面的背景，即使我有不同的控制器范围图像 url。
我的html是这样的：
<body ng-controller="mainController" ng-style="bodyStyles">
...
<div id="main">
<div ng-view></div>
</body>
我的脚本： var angVenture = angular.module('angVenture', ['ngRoute']);
// configure routes
angVenture.config(function($routeProvider, $locationProvider)
$routeProvider
// route for the index page
.when('/home',
templateUrl : 'pages/home.html',
controller : 'mainController'
)
// route for the about page
.when('/about',
templateUrl : 'pages/about.html',
controller : 'aboutController'
)
... more routes.....
// create the controller
angVenture.controller('mainController', function($scope)
// create a message to display in our view
$scope.message = 'home page';
$scope.bodyStyles =
"background": "url(../images/someimage.jpg) no-repeat center center fixed",
"-webkit-background-size": "cover",
"-moz-background-size": "cover",
"-o-background-size": "cover",
"background-size": "cover"
);
angVenture.controller('aboutController', function($scope)
$scope.message = 'another page.';
);
....more controllers for different pages...
用 ui-router 做这个会更好吗？
【问题讨论】：
【参考方案1】：更好的策略是不在javascript 中执行此操作，而是将所有样式移至您的css。您可以通过使用 $scope 变量添加类并在 css 中定义这些类来实现：
控制器
angVenture.controller('mainController', function($scope)
// create a message to display in our view
$scope.message = 'home page';
$scope.bodyClass = 'main-view';
);
查看
<body ng-controller="mainController" ng-class="bodyClass">
CSS
.main-view
"background": "url(../images/someimage.jpg) no-repeat center center fixed",
"-webkit-background-size": "cover",
"-moz-background-size": "cover",
"-o-background-size": "cover",
"background-size": "cover"
【讨论】：
【参考方案2】：试试这个
angVenture.controller('mainController', function($scope, $location)
// create a message to display in our view
var classObject = "/home":"../images/someimage1.jpg", "/about": "../images/someimage1.jpg" ;
$scope.message = 'home page';
$scope.imageName = classObject[$location.path()];
);
CSS
.main-view
"-webkit-background-size": "cover",
"-moz-background-size": "cover",
"-o-background-size": "cover",
"background-size": "cover"
HTML
<body ng-controller="mainController" class="main-view" styel=""background": "url(imageName) no-repeat center center fixed"">
【讨论】：
以上是关于不同页面背景的body标签上的Angular ng风格？的主要内容，如果未能解决你的问题，请参考以下文章
JQuery/CSS - 基于值的不同 <body> 背景图像，无需在 _Layout 页面上的 document.ready() 中加载
“*ngFor”背景颜色变化中的Angular 2“ng-style”