Использование ngRoute с «контроллером как» синтаксис в angularJS

Question

У меня есть следующие config и 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' 
    }); 

Моя проблема возникает, когда я использую в в index.html.

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

Поскольку я не использую $scope, просто писать {{pageClass}} не будет работать. Как я могу обойти это, используя controller as syntax?

Редактировать

Я получил несколько хороших ответов. Я также обнаружил, альтернативный способ сделать это, если вы хотите назвать свои controllerAs значения с разными названиями: hctrl, actor и ctrl (как мой код выше):

Вы можете сделать это в HTML:

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

Answer 1

Хорошим подходом к этой проблеме является установка pageClass в качестве конфигурации в определении маршрутов, а затем создание директивы, в которой эти определения будут применяться как все, что вы хотите (конечно, в пределах области действия директивы применительно к).

DEMO

Javascript

Определение конфигурации маршрута с данных объектов ключ-значение.

.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' 
      } 
     }); 

    }) 

Создать директиву, которая устанавливает эти данные с контроллером директивы.

.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 || {}); 
    } 

    }) 

В вашем index.html применить саму директиву и доступа к контроллеру дИРЕКТИВЫ, чтобы получить данные значения.

<div ng-view route-data class="page {{ RouteData.pageClass }}"></div> 

Answer 2

Укажите контроллер в качестве имени

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

Answer 3

Что бы вы ни писали в значении controllerAs должны предваряться переменной, как {{actrl.pageClass}}