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（如上面的代码所示）：< / p>

您可以在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

无论你在控制器中写了什么，都需要在变量前添加值，例如{{actrl.pageClass}}

在angularJS中使用ngRoute和'controller as'语法

3 个答案: