通过 angularJS ng-style 可变背景图像

Posted 2023-03-06

技术标签:

【中文标题】通过 angularJS ng-style 可变背景图像【英文标题】：variable background images through angularJS ng-style 【发布时间】：2015-09-08 00:02:12 【问题描述】：

对不起，如果这是一个新问题。我正在尝试创建一个具有背景图像的登录页面，而我的其他页面没有。我使用了 ng-style 但我无法让属性在页面更改时更新。在我的 index.html 中：

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

车身控制器：

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 样式使用 rootScope 属性（在我所看到的任何地方，人们都建议不要为此目的使用 rootScope）。如何创建动态背景？如果可能的话，我也不想在我的身体标签上使用控制器。

更新

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

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

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

身体控制器

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

一些服务

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

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

【问题讨论】：

所以澄清一下，你想在 $location.path() 改变时改变背景吗？还是在特定时间之后？当 location.path() 改变时。基本上我想要登录页面的背景，而不是其他任何地方。所以我认为最简单的方法是根据当前路径来做到这一点。但欢迎提出其他建议您可以将背景设置为登录视图中的 div，而不是正文...但是如果您仍在尝试这种方式，您可以检查此指令 ***.com/a/15537359/1666722 我试过一个单独的 div。但是因为登录页面是ng-view，所以div在body里面，甚至在一个容器里面，所以我不能为整个页面设置背景。该链接存在我在任何地方都发现的相同问题。登录时ng-style没有改变，只在页面刷新时改变。我建议您更改布局的结构，并将容器 div 放在 ng-view 中，这样您就可以添加全宽的内容...但是如果您不想这样做，请检查指令我把你贴在我的最后一条评论中（是 myz 的回答，34 分） 【参考方案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;

【讨论】：

【参考方案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;

【讨论】：

不幸的是，这并不能解决我的主要问题。控制器仅在应用程序加载（和刷新）时调用一次。所以用户登录时 $scope.isLogin 不会改变。 @Mischa 那是一个单独的问题。您需要一项服务来处理所有这些。我的建议是注入每个实例的服务，每次交换页面时都会检查它。如果您使用的是路由，这几乎是内置的。正确，但这是我遇到的主要问题。我尝试过提供服务，但无法使其正常工作。因此，如果您有示例，我将不胜感激。 @Mischa 我没有从你的问题措辞中解释这一点。你要么想使用路由（你现在用什么路由？）我认为 ui-router 有一种方法可以很容易地做到这一点。否则，您想创建一个新模块并将其注入到您使用它的任何位置，该服务将执行您的逻辑 ($location.path() === '/login') 并将某些内容发送回您注入的任何位置.现在，您在登录屏幕中的 1 范围内拥有逻辑，所以是的，它不会在其他地方工作。这实际上取决于您如何设置应用程序，但我会推荐一项服务。 @Mischa 所以你会创建一个服务 - docs.angularjs.org/guide/services 。可能只是一个 .service ，因为您只需要一个单例在着陆时检查 url，这会将结果发送到控制器并获取您需要的任何内容。

以上是关于通过 angularJS ng-style 可变背景图像的主要内容，如果未能解决你的问题，请参考以下文章

AngularJS - 选中时使用 ng-style 设置单选按钮标签的颜色

在AngularJS中添加带有'ng-style'的背景图片

为啥我们在 AngularJS 中使用 ng-style 而不是 style 进行 css 格式化？

AngularJS如何在使用ng-style时启用彩色打印css？

AngularJS - ng-style 不更新 css 背景属性

AngularJS ng-style 与 ng-model 范围变量