1

私は次のものを持ってい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, actorand ctrl(上記のコードのように):

htmlでこれを行うことができます：

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

3 に答える 3

6

この問題に対する適切なアプローチはpageClass、ルート定義で を設定として設定し、これらの定義を希望どおりに適用するディレクティブを作成することです (もちろん、ディレクティブが適用されるスコープ内で)。

デモ

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>
于 2015-07-31T16:54:19.277 に答える
1

コントローラーを名前として指定します 

<div class="page {{hctrl.pageClass}}" ng-view></div>
于 2015-07-31T16:22:17.653 に答える
0

controllerAs 値に書き込んだものはすべて、次のように変数の先頭に追加する必要があります。{{actrl.pageClass}}

于 2015-07-31T16:22:59.930 に答える