current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite

I have the following config and controllers

.config(function($routeProvider){

        $routeProvider

        .when('/', {
            templateUrl: 'page-home.html',
            controller: 'homeController',
            controllerAs: 'hctrl'
        })

        .when('/about', {
            templateUrl: 'page-about.html',
            controller: 'aboutController',
            controllerAs: 'actrl'
        })

        .when('/contact', {
            templateUrl: 'page-contact.html',
            controller: 'contactController',
            controllerAs: 'cctrl'
        });
    })

    .controller('homeController', function(){
        this.pageClass = 'page-home'
    })

    .controller('aboutController', function(){
        this.pageClass = 'page-about'
    })

    .controller('contactController', function(){
        this.pageClass = 'page-contact'
    });

My problem comes when I use in in the index.html. 

 <div class="page {{pageClass}}" ng-view></div>

Since I'm not using $scope, just writing {{pageClass}} won't work. How can I get around this using the controller as syntax?

Edit

I got a couple of good answers. I also discovered an alternate way to do this if you want to name your controllerAs values with different names: hctrl, actor and ctrl (like my code above):

You could do this in the html:

<div class="page {{hctrl.pageClass || actrl.pageClass || cctrl.pageClass}}" ng-view></div>
share|improve this question
up vote 2 down vote accepted

A good approach towards this problem is by setting the pageClass as a configuration in the routes definition and then create a directive that gets these definitions to be applied as whatever you want them to be (of course within the scope where the directive is applied to).

DEMO

Javascript

Define your route configuration with data key-value object.

.config(function($routeProvider) {

    $routeProvider

        .when('/', {
            templateUrl: 'page-home.html',
            controller: 'homeController',
            controllerAs: 'hctrl',
            data: {
              pageClass: 'page-home'
            }
        })

        .when('/about', {
            templateUrl: 'page-about.html',
            controller: 'aboutController',
            controllerAs: 'actrl',
            data: {
              pageClass: 'page-about'
            }
        })

        .when('/contact', {
            templateUrl: 'page-contact.html',
            controller: 'contactController',
            controllerAs: 'cctrl',
            data: {
              pageClass: 'page-contact'
            }
        });

  })

Create a directive that sets these data with the directive's controller.

  .directive('routeData', function() {
    return {
      controller: 'RouteDataController',
      controllerAs: 'RouteData',
      bindToController: true
    }
  })

  .controller('RouteDataController', function($rootScope, $route) {

    var self = this;

    $rootScope.$on('$routeChangeSuccess', setCurrentRouteData);

    setCurrentRouteData();

    function setCurrentRouteData() {
      angular.extend(self, $route.current.$$route.data || {});
    }

  })

In your index.html apply the directive itself and access the directive's controller to get the data values.

<div ng-view route-data class="page {{ RouteData.pageClass }}"></div>
share|improve this answer
    
Thanks for this. By the way - Is my edit above a reasonable approach? – Nilzone- Jul 31 '15 at 17:35
    
No, what would happen if you would add new routes? let's say 20 route additional routes. Would it be reasonable to add 20 more? – ryeballar Jul 31 '15 at 17:40
up vote 1 down vote

Specify the controller as name 

<div class="page {{hctrl.pageClass}}" ng-view></div>
share|improve this answer
    
but it won't always be that controller? – Nilzone- Jul 31 '15 at 16:22
    
you can do the actrl.pageClass or cctrl.pageClass – Teliren Jul 31 '15 at 16:23
    
so I have to pass all three in the html? – Nilzone- Jul 31 '15 at 16:24
up vote 0 down vote

Whatever you wrote in the controllerAs value need to be prepended to the variable, like {{actrl.pageClass}}

share|improve this answer
    
does it matter if I name everyone just ctrl in the routing? – Nilzone- Jul 31 '15 at 16:27
    
No, you can name it whatever you want because each template has a separate controller or scope if you will. I name then according to the controller controller: 'HomeController', controllerAs: 'home' just for clarity – Tj Gienger Jul 31 '15 at 16:33
    
I called all of mine ctrl and in the html I wrote <div class="page {{ctrl.pageClass}}" ng-view></div> That worked great. – Nilzone- Jul 31 '15 at 16:36

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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