テンプレート内に角度のrootScopeが表示されない

私の<body>要素でクラスを変更します（現在$stateのウェブサイトが表示されています）。テンプレート内に角度のrootScopeが表示されない

私は<body class="{{specialClass}}">と言います。specialClassは、$rootScopeの変数です。この変数は、私のメインのアプリモジュールのrunブロックに設定されている。いくつかの理由

angular.module("main", [dependencies]) 
    .run(function($rootScope) { 
    $rootScope.$on('$stateChangeSuccess', function(event, currentState){ 
     switch (currentState.name) { 
      case "about": 
       console.log("I'm on landing page, set specialClass in $rootScope"); 
       $rootScope.specialClass = 'landing-page'; 
       break; 
      default: 
       $rootScope.specialClass = ''; 
       break; 
     } 
    }) 
});

、私のテンプレートがspecialClass変数が表示されませんので、クラス属性は空です。同時に、"I'm on landing page, set specialClass in $rootScope"が表示されます。

どういうところが間違っていますか？

マイフルindex.htmlテンプレート：

<html> 
    <head> 
     <base href="/"> 
     <meta charset="UTF-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>My project</title> 
    </head> 
    <body ng-app="main" class="{{specialClass}}"> 
     <ui-view> 
      This is my application. 
     </ui-view> 
    </body> 
</html>

さらにクレイジーだ何が私はWebPACKのdevのサーバーと開発のフロントエンドを提供する場合、それはOK作品で、クラスが切り替わります。しかし、私がDjangoのプロダクションでこれを提供するとき、それはそうではありません。両方の場合にコンソール出力が存在します。

出典

2016-04-27 Boris Burkov

てみ使用NG-クラスディレクティブ？？ 'ngApp'ディレクティブにbodyタグが含まれている必要があります。 – Revive

どのタグに – Hitmands

そのテンプレートはどこですか？ –

配列構文についてngClassによると、私は自分のアプリでこれを試してみてください。

(() => 
{ 
    'use strict'; 
    angular.module('app', [/**'ng-routing'**/]) 
    .run(['$rootScope', function($rootScope) 
    { 
     // $rootScope.specialClass = ''; // no need, since an empty string is falsy as well as undefined OR null 
     $rootScope.$on('$stateChangeSuccess', function(event, currentState) 
     { 
      switch (currentState.name) 
      { 
       case "about": 
        $rootScope.specialClass = 'landing-page'; 
        break; 
      } 
     }); 
    }]); 
})();

...

<!DOCTYPE html> 
<html xmlns:ng="http://angularjs.org" ng-app="app" ng-cloak ng-strict-di> 
    <head> 
     <meta charset="utf-8"> 
     <title>{{app.title}}</title> 
     <script src="web/libs/jquery/dist/jquery.js"></script> 
     <script src="web/libs/angular/angular.js"></script> 
     <script src="web/js/javascript.js"></script> 
    </head> 
    <body ng-class="[specialClass]"> 
    </body> 
</html>

、あなたのアプリケーションをブートストラップ

出典

2016-04-27 11:23:53

テンプレート内に角度のrootScopeが表示されない

答えて

関連する問題