在angularJS中使用带有'controller as'语法的ngRoute答案

【问题标题】：Using ngRoute with 'controller as' syntax in angularJS在angularJS中使用带有'controller as'语法的ngRoute
【发布时间】：2015-10-23 09:42:00
【问题描述】：

我有以下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>

【问题讨论】：

标签： html angularjs angularjs-ng-route angularjs-controlleras

【解决方案1】：

解决此问题的一个好方法是将pageClass 设置为路由定义中的配置，然后创建一个指令，将这些定义应用为您想要的任何内容（当然在指令适用）。

DEMO

Javascript

使用 data 键值对象定义您的路由配置。

.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>

【讨论】：

谢谢。顺便说一句 - 我的编辑是否合理？
不，如果添加新路线会怎样？假设有 20 条额外的路线。再增加20个是否合理？

【解决方案2】：

将控制器指定为名称

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

【讨论】：

但它不会总是那个控制器？
你可以做actrl.pageClass或者cctrl.pageClass
所以我必须在 html 中传递所有三个？

【解决方案3】：

无论您在 controllerAs 中写入什么值，都需要添加到变量之前，例如 {{actrl.pageClass}}

【讨论】：

我是否在路由中只命名每个人ctrl 是否重要？
不，您可以随意命名它，因为如果您愿意，每个模板都有一个单独的控制器或范围。然后我根据控制器命名 controller: 'HomeController', controllerAs: 'home' 只是为了清楚起见
我把我所有的人都称为ctrl，并在html中写了<div class="page {{ctrl.pageClass}}" ng-view></div>，效果很好。