I need to customize the background image based on specific routes in my application. However, I am facing an issue with the rootScope not updating the value as expected. I have set the value to true in the controller for the route that requires a different background image. Can anyone point out what mistake I might be making here? Is it not possible to utilize $rootScope in routes to modify the body's class?
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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c0e0d0f070b1e03190208410e0d1e072c5e1442061c0b">[email protected]</a>')});
}
else {
el.css({background: url('images/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c7e7d7f777b6e736972785c2e6432766c7b">[email protected]</a>')});
}
}
);
}
}
});
Routes:
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: '/'
});
});