Question

很抱歉，如果这是一个新问题。我正在尝试创建一个具有背景图像的登录页面，而其余页面则没有。我使用过ng-style但是我无法让属性更新页面更改。在我的index.html：

<body ng-app="myApp" ng-style="bodyStyle" ng-controller="bodyController">
  //content
</body

bodycontroller：

var image="http://momentumbooks.com.au/wp-content/uploads/2013/06/space.jpg";
if ($location.path() === '/login') {
  $scope.bodyStyle = {background: "url(" + image + ") no-repeat center center fixed"};
} else{
  $scope.bodyStyle={background: ""}
}

显然这不起作用，因为该函数只被调用一次。我尝试过使用rootScope，但我似乎无法在ng-style中使用rootScope属性（在我看来，我们建议不要使用rootScope来实现此目的）。如何创建动态背景？另外，如果可能的话，我宁愿不在身体标签上使用控制器。

更新

我遇到的主要问题是更改路径时背景图像不会更新。图像在bodycontroller中设置，登录和更改路径时不会更改。

根据我的建议我可以写一个服务，我之前使用过它们，但只是通过getter和setter，所以我假设我可以创建一个服务来向控制器发送一个调用？看起来像这样：

<body ng-app="myApp" ng-style="bodyStyle" ng-controller="bodyController">
   //content
</body

bodycontroller

var image=??;
$scope.bodyStyle = {background: "url(" + image + ") no-repeat center

一些服务

 .service('backgroundService', function (image) {
    var backgroundImage = image
    // somhow set bodycontroller image?
 });

然后在路线改变时以某种方式调用服务？我还没有找到一种方法将服务注入我的路由器配置，这是我认为我需要的。

Answer 1

所以我想出了一个简单的方法，在一些帮助下做到这一点。

app.js中的

添加：

.run(function ($rootScope, $location) {
  $rootScope.$on( "$routeChangeStart", function(event, next, current) {
    $rootScope.bodyClass = $location.path().replace('/', '') + '-page';
  });
});

并将索引更改为：

<body ng-app="myApp" ng-class="bodyClass">

和Css：

.login-page {
  background: url("someImage") no-repeat center center fixed;
}

Answer 2

IMO根据位置切换ng-class会更容易。所以你可以做一些像 -

if ($location.path() === '/login') {
$scope.isLogin = true;
} else{
$scope.isLogin = false;
}

然后在html上

<body ng-app="myApp" ng-class="{'customBgClass' : isLogin }" ng-controller="bodyController">

然后在css类中设置你想要的一切

.customBgClass {
   background: url("http://momentumbooks.com.au/wp-content/uploads/2013/06/space.jpg") no-repeat ce;ter center fixed;
 }

通过angularJS ng风格的可变背景图像

2 个答案: