为什么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路由器的当前状态？

回答

相关问题