爲什麼ng-class不適用於ui路由器的當前狀態？

我的應用程序有兩個不同的視圖（page1和page2），它已被配置爲ui-router的stateProvider。我想基於我正在查看的頁面在身體上應用CSS。如果我正在查看第1頁，我想將class1應用於頁面正文，class2對頁面2應用。爲什麼ng-class不適用於ui路由器的當前狀態？

爲了達到此目的，我使用angularjs的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

$ state服務在HTML中不可用。您只需在html中訪問範圍中設置的變量，快速修復就是在rootScope中設置狀態，然後您可以在HTML中訪問它。

$rootScope.$state = $state;

來源

2017-03-03 09:36:37

我應該在哪裏寫？ –

在模塊的.run函數中。看這裏：[模塊加載及依賴關係]（https://docs.angularjs.org/guide/module） .run（function（$ state，$ rootScope）{ $ rootScope。$ state = $ state; }） –

so .config（function（）{}） .run（function（）{}）; –

我不確定$state服務是否可以像這樣在HTML中訪問。你有沒有考慮建立在你的控制器的一些功能將返回$state.current.data.bodyClass然後，您鏈接功能分爲ng-class

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

HTML：

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

如果使用controllerAs模式，確保你這個函數公開並在帶有控制器別名的HTML中使用它。

來源

2017-03-03 09:29:06 mbeso

這是行不通的！ –

請你分享一下你是如何嘗試這個的。 – mbeso

當然http://pastebin.com/Y6kFupAY –

您不能在HTML訪問$state直接，所以你需要在控制器定義另一個範圍變量像

<!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'。 –

此外，當我做'console.log（$狀態）;'我可以看到該對象下的值，但是當我做'console.log（$ state.current）;'對象被改變，我看不到值。這看起來很奇怪。 –

@bruce_wayne我已經更新了我的答案，並提供了完整的解決方案 – Gaurav

爲什麼ng-class不適用於ui路由器的當前狀態？

回答

相關問題