Javascript 使用$rootScope以角度更改身体的背景图像_Javascript_Angularjs

Javascript 使用$rootScope以角度更改身体的背景图像

javascript angularjs

Javascript 使用$rootScope以角度更改身体的背景图像,javascript,angularjs,Javascript,Angularjs,我正在使用路线，并希望在特定路线上更改背景图像。由于某些原因，背景图像没有改变/没有读取myrootScope的值。对于需要不同背景图像的路线，我在控制器中使该值为真。有人知道我做错了什么吗？我不能在我的路线中使用$rootScope来更改我身体的等级吗 HTML: 路线： angular.module('ciscoImaDashboardApp', ['ngRoute']) .config(function ($routeProvider) { $routeProvider .wh

我正在使用路线，并希望在特定路线上更改背景图像。由于某些原因，背景图像没有改变/没有读取my

rootScope

的值。对于需要不同背景图像的路线，我在控制器中使该值为真。有人知道我做错了什么吗？我不能在我的路线中使用

$rootScope

来更改我身体的等级吗

HTML:

路线：

angular.module('ciscoImaDashboardApp', ['ngRoute'])
  .config(function ($routeProvider) {
  $routeProvider
  .when('/', {
    templateUrl: 'views/welcome.html',
    controller: 'welcomeCtrl'
  })
  .when('/overall-results', {
    templateUrl: 'views/overall.html',
    controller: 'overallCtrl'
  })
  .when('/swim-lane-results', {
    templateUrl: 'views/swim-lane.html',
    controller: 'swimlaneCtrl'
  })
  .when('/key-exemplifiers', {
    templateUrl: 'views/key-exemplifiers.html',
    controller: 'petalCtrl'
  })
  .when('/key-exemplifiers/:exemplifier', {
    templateUrl: 'views/single-exemplifier.html',
    controller: 'keyCtrl',
    resolve: {
      needToChange: function(){
        return true; //or false
      }
    }
  })
  .otherwise({
    redirectTo: '/'
  });

});

如果您使用的是ng route，则可以执行以下操作：

将此指令添加到

主体

元素

app.directive（'dynamicBodyBg'，function（$rootScope，$route）{
返回{
链接：功能（$scope，el）{
$rootScope.$on（“$routeChangeSuccess”，
函数（）{
//您的路由器已更改，您可以更改背景
//在这里添加逻辑
if（$route.current.locals.needToChange）{
css（{background:url（'//任何你想要的背景'}）；
}
否则{
css（{background:url（'//restore'}）；
}
}
);
}
}
})；

通过创建一个根范围并为所有视图更改它，解决了这个问题

$rootScope.backgroundImg = "url('../images/background@2x.jpg')";

然后在我看来使用它如下：

<body ng-app="ciscoImaDashboardApp" ng-controller="navCtrl" ng-style="
{'background-image': backgroundImg}" >

您是否使用angular ui router？？？为了澄清我的问题，是否希望在视图中为不同的ui router状态显示不同的图像？？？@SameerK是的，我的视图中有不同的路由，并且希望根据我所处的路由更改所有视图共享的主体元素的背景颜色。我更新了我的问题，现在正在浏览wing my route file.在这一个中应该是

navCtrl

？

angular.module（'ciscoImaDashboardApp'）.controller（'keyCtrl'，function（$scope，$rootScope）{$rootScope.examplierpage=true；}）

P.S建议您切换到ui路由器，它更易于理解和维护。current.locals应该做什么？将主体设置为指令不会改变背景图像。指令函数中的任何内容都无法识别。请参阅我更新的问题。指令名称应为“dynamic body bg”我得到了这个错误：$route.current.locals.needToChange不是一个函数是的，很抱歉，这是一个输入错误，应该是

$route.current.locals.needToChange

是我从头开始写代码的：）这不是我做的吗？

$rootScope.backgroundImg = "url('../images/background@2x.jpg')";

<body ng-app="ciscoImaDashboardApp" ng-controller="navCtrl" ng-style="
{'background-image': backgroundImg}" >