Angular - of-class 基于状态

Question

我的代码不起作用的具体原因是什么？

<li ng-class="{active : $state.includes('products')}">

路由器代码：

.state('products', {
  url: '/products',
  templateUrl: 'app/components/views/products/products.html',
  controller: 'productsController',
  controllerAs: 'products'
})

Answer 1

您需要通过控制器中的 $injector 获取 $state 提供程序（就像您注入自己 $scope 或服务。

编辑：

包括在内：

 angular.module('yourModule', []).controller('YourController',['$injector',
     funciton($injector){}
 ]);

然后：

$scope.$state = $injector.get('$state');

您现在可以访问 $state。要获取当前状态的名称，只需使用：

 $state.current.name

示例：

 <li ng-class="{active : $state.current.name === 'products'}">

Answer 2

您忘记在 $rootScope 上设置 $state 和 $stateParams，如果您这样做，您可以在 html 上继续使用第一种方法：

angular.module("myApp").run(function ($rootScope, $state, $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
});

这样你就不需要在每个控制器上都注入它们。

这是参考资料： https://github.com/angular-ui/ui-router/wiki/quick-reference#note-about-using-state-within-a-template

PS：我个人不推荐这种全局的方式，但也有它的优点

Angular - of-class 基于状态

Angular - ng-class based on state

angularjs

state

ng-class