Question

我正在尝试在我单独的部分的主体上设置不同的背景图像。

但是这些图像只是被加载到div区域而不是我想要的整个身体，你们中的任何一个人都可以知道如何解决这个问题吗？

这是我的代码

angular.module('controller',[])

app.controller('AboutCtrl',['$scope', function($scope){
	$scope.title="The About page"
}])

app.controller('ServiceCtrl',['$scope', function($scope){
	$scope.title="Our services page"
}])
app.controller('ContactCtrl',['$scope', function($scope){
	$scope.title="How to contact us page"
}])
app.controller('MyCtrl', ['$rootScope', function ($rootScope) {
    $rootScope.bgimg = "img/home.jpg";
}])

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

<body >
<div  id="bg img" ng-controller="MyCtrl" style="background-image: url({{ bgimg }})">
	

	</div>
</body

Answer 1

你能不能将你的主控制器移到身体标签上？

<body id="bg img" ng-controller="MyCtrl" style="background-image: url({{ bgimg }})">
  <div ng-controller="OtherCtrl">

Answer 2

正如我在评论中提到的，您创建了一个包含背景变量的服务。然后创建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() }})">

最后，对于您想要进行更改的每个Controller，将服务注入控制器并调用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>

我背负着布莱恩·贝克（Brian Baker）的掠夺者，向你们展示这里的变化。

https://plnkr.co/edit/RjgwdwuOFJgMct4y3qUS?p=preview

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

2 个答案: