Question

我在同一个显示屏幕上有多个嵌套视图，但为了响应css目的，我想添加一个当前状态视图处于活动状态的类。（我知道它们都是活跃的，但我正在寻找一种方法来区分哪个视图与$state.$current相关联）。我想使这个动态，不需要静态名称。我已经使用ui-sref-active来显示面包屑，其中点击链接以达到当前状态，但现在我也在寻找一种方法来检查与状态相关的视图是否正确与最新状态相关的一个。

//parent
<article class="column1" ng-class="{current: WHERE_I'M_LOOKING_FOR_HELP}">
  <a ng-repeat="item in items" ui-sref="{{item.url}}" ui-sref-active="selected">
    {{ item.title }}
  </a>
</article>
<ui-view/>

//child 1
<article class="column2" ng-class="{current: WHERE_I'M_LOOKING_FOR_HELP}">
  <a ng-repeat="item in items" ui-sref="{{item.url}}" ui-sref-active="selected">
    {{ item.title }}
  </a>
</article>
<ui-view/>

//child 2
<article class="column3" ng-class="{current: WHERE_I'M_LOOKING_FOR_HELP}">
  <a ng-repeat="item in items" ui-sref="{{item.url}}" ui-sref-active="selected">
    {{ item.title }}
  </a>
</article>
<ui-view/>
//ETC... UNKNOWN NUMBER OF NESTED STATES

我知道我可以做类似的事情：<article ng-class="{ current: $state.$current.path.length == 2 }">但是我不想在视图中写一个静态数字。

更新我希望能够检查当前状态是否与每个ui-view的状态完全匹配。

Answer 1

让它正常工作......如果不同，请随时发布您的解决方案。谢谢！

//global state
app.run(function($rootScope, $state) {
  $rootScope.$state = $state;
});

//state provider
.state('contacts.detail', {
    url: "/contacts/detail",
    templateUrl: 'contacts.detail.html',
    controller: function ($scope, $state) {
        $scope.viewstate = $state.current.name;
    }
})
// etc. states and controllers

//view template
<article class="column1" ng-class="{current: $state.current.name == viewstate}">
  <a ng-repeat="item in items" ui-sref="{{item.url}}" ui-sref-active="selected">
    {{ item.title }}
  </a>
</article>
<ui-view/>
//etc... view templates

Answer 2

如果我正确理解您的问题，我相信您可以使用isState过滤器。在这里查看更多信息：

ui.router.state/isState

如果您在$state或$scope的某处存储对$rootScope的引用，那么您可以执行以下操作：

<article class="column1" ng-class="{current: ($state.current.name | isState)}">

嵌套状态的Angular ui-router是当前状态

2 个答案: