Using ngRoute with 'controller as' syntax in angularJS

Question

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>

score 6 · Accepted Answer · answered Jul 31 '15 at 16:54

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>

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

score 1 · Answer 2 · answered Jul 31 '15 at 16:22

1

Specify the controller as name

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

answered Jul 31 '15 at 16:22

Teliren

342
1
5

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

score 0 · Answer 3 · answered Jul 31 '15 at 16:22

0

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

answered Jul 31 '15 at 16:22

Tj Gienger

1,395
1
12
17

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 `
` That worked great. – Nilzone- Jul 31 '15 at 16:36

Using ngRoute with 'controller as' syntax in angularJS

3 Answers3

Linked