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>