Javascript 角度路由，每个路由页面的不同背景图像_Javascript_Css_Angularjs

Javascript 角度路由，每个路由页面的不同背景图像

javascript css angularjs

Javascript 角度路由，每个路由页面的不同背景图像,javascript,css,angularjs,Javascript,Css,Angularjs,我试图在我的单独片段的主体上设置一个不同的背景图像但是图像只是被加载到div区域，而不是我想要的整个身体，你们中有谁能想到如何解决这个问题吗这是我的密码角度模块（'controller'，[]） app.controller（'AboutCtrl'，['$scope'，函数（$scope）{ $scope.title=“关于页面” }]) app.controller（'ServiceCtrl'，['$scope'，函数（$scope）{ $scope.title=“我们的服务页面” }

我试图在我的单独片段的主体上设置一个不同的背景图像

但是图像只是被加载到div区域，而不是我想要的整个身体，你们中有谁能想到如何解决这个问题吗

这是我的密码

角度模块（'controller'，[]） app.controller（'AboutCtrl'，['$scope'，函数（$scope）{ $scope.title=“关于页面” }]) app.controller（'ServiceCtrl'，['$scope'，函数（$scope）{ $scope.title=“我们的服务页面” }]) app.controller（'ContactCtrl'，['$scope'，函数（$scope）{ $scope.title=“如何联系我们页面” }]) app.controller（'MyCtrl'，['$rootScope'，函数（$rootScope）{ $rootScope.bgimg=“img/home.jpg”； }])

#bg{
位置：固定；
前-50%；
左-50%；
宽度：200%；
身高：200%；
}
#bg-img{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
保证金：自动；
最小宽度：50%；
最小高度：50%；
}


你能不能把你的主控制器移到body标签上
<body id="bg img" ng-controller="MyCtrl" style="background-image: url({{ bgimg }})">
  <div ng-controller="OtherCtrl">

正如我在评论中提到的，您创建了一个包含后台变量的服务。然后创建get/set方法以允许进行更改
var app = angular.module('controller',[])
  .service('SessionService', function(){
  var vm = this;
  this.bgImg = "https://c1.staticflickr.com/1/31/37271521_47df0e4547_b.jpg";
  return {
    setBgImg: function(newBgImg){
      vm.bgImg = newBgImg;
    },
    getBgImg: function(){
      return vm.bgImg;
    }
  }
})

然后将SessionService注入到在Body上设置的主控制器中。并调用get方法来检索背景变量
app.controller('SessionCtrl', ['$scope','SessionService',function($scope, SessionService) {
  this.getBgimg = SessionService.getBgImg;
}]);

<body id="bg img" ng-controller="SessionCtrl as vm" style="background-image: url({{ vm.getBgimg() }})">

app.controller（'SessionCtrl'，['$scope'，'SessionService'，函数（$scope，SessionService）{
this.getBgimg=SessionService.getBgimg；
}]);

最后，对于要进行更改的每个控制器，也将服务注入控制器并调用Set方法。在这个例子中，我从一个按钮点击函数调用它
app.controller('ContactCtrl',['$scope','SessionService', function($scope,SessionService){
    $scope.ContactTitle="How to contact us page";
    $scope.winter = "";
    $scope.changeBg = function(){
      SessionService.setBgImg('http://alvaradoconsultinggroup.com/wp-content/uploads/2014/10/success.jpg');
    }
}]);

<div ng-controller="ContactCtrl">
      <p style="font-size: 25px;color: white;">{{ContactTitle}}</p>  
      <button ng-click="changeBg()">Change Back</button>
    </div>

app.controller（'ContactCtrl'，['$scope'，'SessionService'，函数（$scope，SessionService）{
$scope.ContactTitle=“如何联系我们页面”；
$scope.winter=“”；
$scope.changeBg=函数（）{
SessionService.setBgImg（'http://alvaradoconsultinggroup.com/wp-content/uploads/2014/10/success.jpg');
}
}]);
{{ContactTitle}
调回

我背着Brian Baker的plunker向你展示了这里的变化
1.使用ngController=“sessionController as Session”2将类似控制器的会话添加到正文中。在SessionController中，创建名为bgUrl的属性。3.插入SessionController或SessionService，允许您将bgUrl更新到需要更改背景的每个控制器中。我无法将会话控制器注入每个控制器，请您给我一个代码片段好吗？谢谢Hanks Brian，但我已经试过了，它不起作用，而是显示一个空白背景。它可能无法处理您发布的代码，因为您将bgimg变量保留在$rootScope中，但没有访问绑定中的$root。请尝试style=“background image:url（{{$root.bgimg}}}）”
。不确定发生了什么，但这是一个大问题。这又回到了何时使用服务以及何时使用$rootScope的大问题。我同意在大多数情况下，最好使用服务在控制器之间共享数据。对于核心应用程序变量（似乎是这样）之类的东西，我认为只使用$rootScope是可以的。当然，给猫剥皮的方法不止一种。注入服务说明了控制器所需的依赖性，我考虑更干净的代码。