使用ngRoute以“控制器”中angularJS语法 [英] Using ngRoute with 'controller as' syntax in angularJS

问题描述

我有如下的配置和控制器

 的.config（函数（$ routeProvider）{        $ routeProvider        。什么时候（'/'， {
            templateUrl：页面home.html做为'，
            控制器：HomeController中'，
            controllerAs：hctrl
        }）        。当（'/约'，{
            templateUrl：页面about.html'，
            控制器：'aboutController'，
            controllerAs：actrl
        }）        。当（'/接触'，{
            templateUrl：页面-contact.html'，
            控制器：'的ContactController'，
            controllerAs：CCTRL
        }）;
    }）    .controller（HomeController中'，函数（）{
        this.pageClass =页面家
    }）    .controller（'aboutController'，函数（）{
        this.pageClass ='​​页关于
    }）    .controller（'的ContactController'，函数（）{
        this.pageClass =页面接触'
    }）;
 

我的问题是当我在 index.html的使用。

 ＆LT; D​​IV CLASS =页面{{pageClass}}NG-视图＆gt;＆LT; / DIV＆GT;
 

由于我没有使用 $范围，只是写 {{} pageClass} 将不起作用。我怎样才能解决这个得到使用控制器作为语法？

修改

我有一对夫妇好的答案。我还发现了另一种方式，如果你想用不同的名称来命名 controllerAs 值做到这一点： hctrl ，演员和 CTRL （就像我的code以上）：

您可以在HTML做到这一点：

 ＆LT; D​​IV CLASS =页面{{hctrl.pageClass || actrl.pageClass || cctrl.pageClass}}NG-视图＆gt;＆LT; / DIV＆GT;
 

解决方案

对这个问题的一个好方法是通过设置 pageClass 作为路由定义一个配置，然后创建指令，获取这些定义为你想他们是（当然，其中的指令适用于范围之内）的任何应用。

演示

的JavaScript

的是数据键 - 值对象定义你的路由配置。的

 的.config（函数（$ routeProvider）{    $ routeProvider        。什么时候（'/'， {
            templateUrl：页面home.html做为'，
            控制器：HomeController中'，
            controllerAs：hctrl'，
            数据：{
              pageClass：页面家
            }
        }）        。当（'/约'，{
            templateUrl：页面about.html'，
            控制器：'aboutController'，
            controllerAs：actrl'，
            数据：{
              pageClass：页关于
            }
        }）        。当（'/接触'，{
            templateUrl：页面-contact.html'，
            控制器：'的ContactController'，
            controllerAs：CCTRL'，
            数据：{
              pageClass：页面接触'
            }
        }）;  }）
 

的创建一个指令，该指令的控制器将这些数据。的

  .directive（'的RouteData'，函数（）{
    返回{
      控制器：'RouteDataController'，
      controllerAs：'的RouteData'，
      bindToController：真
    }
  }）  .controller（'RouteDataController'，函数（$ rootScope，$路线）{    VAR自我=这一点;    $ rootScope在$（'$ routeChangeSuccess'，setCurrentRouteData）。    setCurrentRouteData（）;    功能setCurrentRouteData（）{
      angular.extend（自我，$ route.current $$ route.data || {}）;
    }  }）
 

的在您的index.html应用指令本身并访问指令的控制器，以获得数据的值。的

 ＆LT; D​​IV NG-视图route-数据类=页面{{RouteData.pageClass}}＆GT;＆LT; / DIV＆GT;
 

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>

解决方案

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>

这篇关于使用ngRoute以“控制器”中angularJS语法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！