我是 angular 和 ngroute 的新手，我正在尝试使用 ng-style 为网站的每个页面设置不同的图像背景。目前它设置所有站点页面的背景，即使我有不同的 Controller 范围图像 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 来做这件事吗？
最佳答案
更好的策略是不要在 JavaScript 中执行此操作，而是将所有样式移至您的 css。您可以通过使用 $scope 变量添加类并在 css 中定义这些类来实现:
Controller
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"
}
关于javascript - 不同页面背景的 body 标签上的 Angular ng-style？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37290659/