使用$ rootScope改變角度的身體背景圖像

-1

我正在使用路線，並想在特定路線上更改背景圖像。出於某種原因，背景圖像不會改變/正在讀取我的rootScope的值。我在我的控制器中爲需要不同背景圖像的路由設置值。任何人都知道我在這裏做錯了什麼？我的路線中不能使用$rootScope來改變我的身體類別嗎？

HTML：

<body ng-app="ciscoImaDashboardApp" dynamicBodyBg ng-controller="navCtrl" >

JS：

.directive('dynamicBodyBg', function($rootScope, $route){ 
    return { 
     restrict: 'A', 
     link: function($scope, el){ 
      $rootScope.$on('$routeChangeSuccess', 
      function() { 
       if ($route.current.locals.needToChange()){ 
       el.css({background: url('images/[email protected]')}); 
       } 
       else { 
       el.css({background: url('images/[email protected]')}); 
       } 
      } 
     ); 
     } 
    } 

});

路線：

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: '/' 
    }); 

});

來源

2015-12-19 Neha Sohail

你是否採用了棱角分明的UI路由器？爲了讓自己清楚，是否想爲視圖中的不同ui-router狀態顯示不同的圖像？ –

@SameerK是的，我在視圖中有不同的路線，並且想要改變我所有視圖共享的正文元素的背景顏色，具體取決於我所處的路線。我更新了我的問題，現在正在顯示我的路線文件。 –

這個應該是'navCtrl'嗎？ 'angular.module（ 'ciscoImaDashboardApp'）控制器（ 'keyCtrl'，函數（$範圍， $ rootScope）{$ rootScope.exemplifierPage = TRUE;} ）;' – Yerken

如果您正在使用NG-路線，你可以做到以下幾點：

添加這個指令給你的body元素。

app.directive('dynamicBodyBg', function($rootScope, $route){ 
 
    return { 
 
    link: function($scope, el){ 
 
     $rootScope.$on('$routeChangeSuccess', 
 
     function() { 
 
//your router has changed and u can change the background 
 
//add the logic here 
 
      if ($route.current.locals.needToChange){ 
 
      el.css({background: url('//whatever background u want'}); 
 
      } 
 
      else { 
 
      el.css({background: url('//restore'}); 
 
      } 
 
     } 
 
    ); 
 
    } 
 
    } 
 
});

在你$routeProvider

$routeProvider 
 
    .when('/', { 
 
    templateUrl: 'views/welcome.html', 
 
    controller: 'welcomeCtrl', 
 
    resolve: { 
 
     needToChange: function(){ 
 
     return true; //or false 
 
     } 
 
    } 
 
    })

P.S建議您切換到用戶界面的路由器，這是很容易理解和維護。

來源

2015-12-20 06:58:26 Yerken

current.locals應該做什麼？使身體成爲指令不會改變背景圖像。指令功能中沒有任何內容被識別。參考我更新的問題。 –

指令名稱應該是「dynamic-body-bg」 – Yerken

我收到此錯誤： $ route.current.locals.needToChange不是函數 –

通過創建rootScope並將其更改爲所有視圖來解決此問題。

$rootScope.backgroundImg = "url('../images/[email protected]')";

，然後用它在我的觀點是這樣的：

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

來源

2015-12-23 15:17:36

使用$ rootScope改變角度的身體背景圖像

回答

相關問題