なぜng-classはuiルータの現在の状態に応じて適用されていませんか？

私のアプリケーションには、ui-routerのstateProviderで構成された2つのビュー（page1とpage2）があります。私は見ているページに基づいて体にCSSを適用したいです。私がpage1を見ているのであれば、class1をページの本文に、class2をpage2に適用したいと思います。なぜng-classはuiルータの現在の状態に応じて適用されていませんか？

これを達成するために、のng-classという指令を使用しています。 ng-classディレクティブの値は、ui-routerの現在の状態に従って設定されています。

ここにそのコードの例がありますが、問題はng-class内の式が評価されないためです。したがって、私のCSSは適用されません。

私が間違っていることを誰かが指摘できますか？

<!doctype html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.min.js"></script> 

    <style media="screen"> 

    h2 { 
     margin: 5px 5px 5px 5px; 
    } 
    body { 
     display: flex; 
     flex-direction: column; 
    } 
    .class1 { 
     align-items: flex-start; 
    } 
    .class2 { 
     align-items: center; 
    } 
    </style> 
    </head> 

    <body ng-app="graceApp" ng-class="$state.current.data.bodyClass"> 

    <div ui-view style="display: flex"></div> 

    <script> 
    angular 
     .module('graceApp', [ 
     'ui.router' 
     ]) 
     .config(function ($stateProvider, $urlRouterProvider) { 
     $stateProvider 
      .state('page1', { 
      url: '/page1', 
      template: '<h2>This is page1</h2> <h2>Item1</h2> <h2>Item2</h2>', 
      data: { 
       bodyClass: 'class1' 
      } 
      }) 
      .state('page2', { 
      url: '/page2', 
      template: '<h2>This is page2</h2> <h2>Item1</h2> <h2>Item2</h2>', 
      data: { 
       bodyClass: 'class2' 
      } 
      }); 
     $urlRouterProvider.otherwise('/page1'); 
     }); 
    </script> 
</body> 
</html>

出典

2017-03-03 bruce_wayne

$州サービスはHTMLでは使用できません。スコープに設定されている変数にhtmlでアクセスするだけで、rootscopeで状態を設定してからHTMLにアクセスすることができます。

$rootScope.$state = $state;

出典

2017-03-03 09:36:37

どこに書きますか？モジュールの.run機能の –

ここでルック：[モジュールのロード＆依存]（https://docs.angularjs.org/guide/module） .RUN（関数（$状態、$ rootScope）{ $ rootScope $状態= $状態; 。 }） –

.config（function（）{}）の後に。 .run（function（）{}）; –

私は$stateサービスは、このようなHTMLでアクセス可能であるかどうかはわかりません。あなたは$state.current.data.bodyClassを返しますあなたのコントローラ内のいくつかの関数を作成することを検討してから、あなたはにその機能をリンクしましたng-class

function getClass() { 
    return $state.current.data.bodyClass; 
}

HTML：あなたはcontrollerAsパターンを使用している場合

<body ng-app="graceApp" ng-class="getClass()">

、あなたが作ることを確認してくださいこの関数はパブリックで、HTMLの中でコントローラエイリアスとともに使用します。

出典

2017-03-03 09:29:06 mbeso

のように、コントローラ内の別のスコープの変数を定義する必要がありますので、直接HTMLに$stateにアクセスすることはできません！ –

どうやってこれを試してもらえますか？ – mbeso

確かにhttp://pastebin.com/Y6kFupAY –

あなたはこれが動作していない

<!doctype html> 
<html ng-app="graceApp"> 

<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.min.js"></script> 
    <style media="screen"> 
    .class1 { 
     background-color: red; 
    } 

    .class2 { 
     background-color: green; 
    } 
    </style> 
</head> 
<body ng-controller="mainController" ng-class="bodyClass"> 
    <div ui-view></div> 
    <script> 
    angular.module('graceApp', ['ui.router']).config(function($stateProvider, $urlRouterProvider) { 
     $stateProvider 
      .state('page1', { 
       url: '/page1', 
       template: '<h2>This is page1</h2> <h2>Item1</h2> <h2>Item2</h2>', 
       data: { 
        bodyClass: 'class1' 
       } 
      }) 
      .state('page2', { 
       url: '/page2', 
       template: '<h2>This is page2</h2> <h2>Item1</h2> <h2>Item2</h2>', 
       data: { 
        bodyClass: 'class2' 
       } 
      }); 
     $urlRouterProvider.otherwise('/page1'); 
    }); 

    angular.module("graceApp").controller("mainController", function($rootScope, $scope) { 
     $rootScope.$on("$stateChangeSuccess", function(event, current, params) { 
      console.log(current.data.bodyClass); 
      $scope.bodyClass = current.data.bodyClass; 
     }); 
    }); 
    </script> 
</body> 
</html>

出典

2017-03-03 09:42:27 Gaurav

私は 'angular.jsを取得しています：14362TypeError：bodyのコントローラを追加した後、プロパティ 'bodyClass' of undefined'を読み込めません。 –

さらに、私は 'console.log（$ state）;'そのオブジェクトの下の値を見ることができますが、 'console.log（$ state.current）;'を実行するとオブジェクトが変更され、そこに値が見えません。これは奇妙に見えます。 –

@bruce_wayne私は自分の答えを更新し、完全な解決策を提供しました – Gaurav

なぜng-classはuiルータの現在の状態に応じて適用されていませんか？

答えて

関連する問題