6

I have a div in the layout page:

<div class="{{$root.containerClass}}">...</div>

There are two route states:

.state('controllerAction', {
    url: '/:controller/:action',
    templateUrl: function($stateParams) {
         return $stateParams.controller + '/' + $stateParams.action;
    },
    controllerProvider: function($stateParams) {
         return $stateParams.controller + $stateParams.action + 'Controller';
    },
    onEnter: function($rootScope, $stateParams) {
        $rootScope.containerId = $stateParams.controller.toLowerCase() + '-index';
    }
})
.state('controller', {
    url: '/:controller',
    templateUrl: function($stateParams) {
         return $stateParams.controller + '/index';
    },
    controllerProvider: function($stateParams) {
         return $stateParams.controller + 'Controller';
    },
    onEnter: function($rootScope, $stateParams) {
        $rootScope.containerId = $stateParams.controller.toLowerCase() + '-index';
    }
});

I'd like the class to be changed when the route changes using $stateParams. With the code above it does changes, but only to the containerClass of the previous route.

Any help is appreciated.

4 Answers 4

16

Check my other answer: Route-Dependent CSS Page Transitions in AngularJS

I got it working with onEnter , plunker: http://plnkr.co/edit/LEMntLYosA2gIvNzw5gv?p=preview

I prefer doing something like this

Here is a plunker: http://plnkr.co/edit/3Wof05ck3lVLqgTBDOew?p=preview

Listen to a $stateChangeSuccess event:

States:

.state('home', {
    url: '/',
    templateUrl: '/account/index.html',
    controller: 'AccountLoginController',
    containerClass: 'account-index'
})
.state('book', {
    url: '/Book',
    templateUrl: '/book/index.html',
    controller: 'BookController',
    containerClass: 'book-index'
})

Run block:

app.run(function($rootScope){

    $rootScope.$on('$stateChangeSuccess',function(event, toState, toParams, fromState, fromParams){
        $rootScope.containerClass = toState.containerClass;
    });

});

Markup:

<div ng-class="{{containerClass}}">...</div>
6
  • It is my bad. I tried to simplify the question so that it may help to the wider range of people. There is actually also $stateParams involved. Please see updated question. Jan 26, 2014 at 12:18
  • nvermind. Your solution works for updated version as well. The only thing is... I was trying to apply class to the div that is also a ui-view container and for some reason it would not do it. I just made a wrapper div and all started working. Jan 26, 2014 at 12:31
  • I recommend creating a directive on ui-view element , check my other answer again : stackoverflow.com/questions/21211460/… Jan 26, 2014 at 12:35
  • @Ilan Frumer I have it running in my app BUT... it won't take any class in ng-class="{{containerClass}}". It only takes html text e.g., "class: {{containerClass}}" that you have in your plunker, I edited that and couldn't get it to take a new class either. Please Help me! Oct 14, 2015 at 22:36
  • @totallytotallyamazing It should be ng-class="containerClass" without the interpolation, check this out: plnkr.co/edit/AJsVNHMcSLM95F4LYZMy?p=preview Oct 14, 2015 at 22:48
1

You need :

  • a slugify filter
  • to associate $state to the $rootScope
  • modify your root template to include this variable.

First

Associate $state to $rootScope

angular.module("your-app", ['ui.router'])
        .run(['$rootScope',
              '$state',
              '$stateParams',
            function ($rootScope, $state, $stateParams) {
                $rootScope.$state = $state;
                $rootScope.$stateParams = $stateParams;
            }]);

Second

Include a slugify filter. something like this: http://paulsmith.github.io/angular-slugify/

Thirdly

<body id="{{$state.current.name|slugify}}"> ... </body>
1

It is allways better use directives for DOM manipulation and this is the case. In this example I'm using ui-router

Here is my code I'm using

Directive:

(function() {
'use strict';

angular.module( 'directives' ).directive( 'bodyClass', bodyClass );

bodyClass.$inject = [ '$rootScope'];

function bodyClass(  $rootScope  ) {
    return function( scope, elem, attr ) {

        $rootScope.$on( "$stateChangeSuccess", function( event, next, current    ) {
            var url = next.name.replace( /\./g, '-' );
            elem.attr( 'class', '' ).addClass( url );
        } );
    };
}
;
})();

HTML

<body body-class></body>

RESULT

So if you have URL like: app/welcome your body class will be :

<body class="app-welcome"></body>
1
  • 1
    this doesn't work as you will add a class each time the $state changes, the old class won't be removed Oct 3, 2015 at 2:53
0

Change

<div class="{{$root.containerClass}}">...</div>

to

<div ng-class="containerClass">...</div>

http://docs.angularjs.org/api/ng.directive:ngClass So, make use of ng-class directive, and when you want to access a scope variable (either local or root), just state the name, do not use $root

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.