Angular 根据状态添加正文 class

Question

我有类似的东西在工作

  <body ng-app="ELT" ng-class="{'mapBody': $state.includes('map')}" ng-controller="mainCtrl">

很明显我想做的是在状态为 map

时添加 class "mapBody"

我的控制器就是这样

  .controller('mainCtrl', ['$scope','$state',function ($scope,$state) {
    'use strict';
    $scope.$state = $state;
  }])

有更好的方法吗？不喜欢我只为这件事必须有一个新控制器的事实，而且 html.

中有很多逻辑

Answer 1

根据 Radim Kohler 更好的方法是，您可以使用 ui-sref-active 指令。

要在 ui-路由器状态匹配时将 class 活动添加到您的元素，请使用

HTML

<body ng-app="ELT" ui-sref-active="mapBody" ng-controller="mainCtrl">
  <a ui-sref="app"></a>
</body>

只要底层 ui-sref 是当前状态，那么如果将 mapBody class 应用到主体。

请在此处查看 Example

编辑

在你的情况下，你想根据状态向正文附加一个 class，所以在这种情况下使用 ui-sref-active 是行不通的。因为 body 可以包含多个 ui-sref 并且至少会满足一个，所以 class 将始终附加到 body。我相信目前你的做法是正确的。但我想建议一个改变，而不是每次都将 $state 分配给控制器。在 angular run 阶段只做一次。

//it will assign a state inside $rootScope and it will get available on each page 
app.run(function($rootScope, $state) { 
  $rootScope.$state = $state;
});

上面的代码会更简洁，并且会避免每次都在范围内分配 $state。

谢谢。

Angular 根据状态添加正文 class

Angular adding a body class depending on state

javascript

angularjs

angular-ui-router

url-routing

angularjs-routing