Css 通过AngularNG风格的可变背景图像_Css_Angularjs

Css 通过AngularNG风格的可变背景图像

css angularjs

Css 通过AngularNG风格的可变背景图像,css,angularjs,Css,Angularjs,抱歉，如果这是一个有点生疏的问题。我正在尝试创建一个有背景图像的登录页面，而我的其他页面没有。我使用了ng样式，但无法在页面更改时更新属性。在my index.html中： <body ng-app="myApp" ng-style="bodyStyle" ng-controller="bodyController"> //content </body 显然这不起作用，因为函数只被调用一次。我尝试过使用rootScope，但我似乎无法使用ng风格的rootScope属性

抱歉，如果这是一个有点生疏的问题。我正在尝试创建一个有背景图像的登录页面，而我的其他页面没有。我使用了ng样式，但无法在页面更改时更新属性。在my index.html中：

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

显然这不起作用，因为函数只被调用一次。我尝试过使用rootScope，但我似乎无法使用ng风格的rootScope属性（无论我在哪里看到，人们都建议不要为此使用rootScope）。如何创建动态背景？如果可能的话，我也不想在我的身体标签上使用控制器

更新

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

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

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

一些服务

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

然后在路线改变时呼叫服务？我还没有找到一种方法将服务注入我的路由器配置，我想这正是我需要的。

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

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

然后在html上

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

所以我想出了一个简单的方法，通过一些帮助来做到这一点

在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">

为了澄清，当$location.path（）更改时，是否希望更改背景？或者在某些时间之后？当location.path（）更改时。基本上，我想为登录页面的背景，但不是任何其他地方。所以我想最简单的方法就是根据当前路径来做。但也有其他建议，您可以将背景设置为登录视图中的div，而不是body。。。但是如果你仍然尝试这种方式，你可以检查这个指令，我已经尝试了一个单独的div。但是因为登录页面是ng视图，div在主体中，甚至在容器中，所以我不能设置整个页面的背景。这个链接和我在任何地方都发现的问题一样。ng样式在我登录时不会更改，仅在页面刷新时更改。我建议您更改布局的结构，并将容器div放在ng视图中，以便您可以添加全宽的内容。。。但是如果你不想这样做，请检查我在最后一条评论中粘贴的指令（mythz的答案有34点），不幸的是，这并不能解决我的主要问题。加载应用程序时（以及刷新时），仅调用控制器一次。因此，当用户登录时，$scope.isLogin不会更改。@这是一个单独的问题。您需要一个服务来处理所有这些。我的建议是，在每次交换页面时，向每个实例中注入一个服务来检查这一点。如果你使用的是路由，这几乎是内置的。没错，但这是我面临的主要问题。我试过做一项服务，但没能成功。因此，如果你有一个例子，我将不胜感激。@Misha我并没有从你的问题措辞中解释这一点。你要么想使用路由（你现在用什么来路由？）我认为ui路由器有一种方法可以很容易地做到这一点。否则，您希望创建一个新模块并将其注入到您使用它的任何位置，该服务将执行您的逻辑（$location.path（）=='/login'），并将某些内容发送回您注入的任何位置。现在，您的逻辑位于登录屏幕中的1个作用域内，因此，是的，它在其他地方不起作用。这实际上取决于你如何设置你的应用程序，但我会推荐一项服务。@Misha，这样你就可以创建一项服务-。可能只是一个.service，因为您只需要一个singleton在登录时检查url，这会将结果发送到控制器，并根据需要执行任何操作。

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

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

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

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