当我们处于状态3时如何突出显示导航选项卡状态1

Question

当我们在state3 中使用ui-router 概念时，我需要突出显示导航选项卡state1。 State3 在 state1 html 中。

下面是我的代码：

<nav> 
    <a ui-sref="state1" ui-sref-active="active">State 1</a>
    <a ui-sref="state2" ui-sref-active="active">State 2</a>
</nav>

<div ui-view></div>

myApp.config(function ($stateProvider, $urlRouterProvider){
    $stateProvider.state("state1", {
        url: "#",
        template: "<p>State 1 <a ui-sref='state3'>details</a></p>",
      })
      .state("state2", {
        url: "#",
        template: "<p>State 2</p>",
      })
      .state('state3', {
            url: "#",
            template: "<h2>state1 details</h2>",
        });
});

JSFiddle

谢谢。

Answer 1

查看您的代码的替代方案。我添加了指向 0.2.15 版 angular-router 的链接，并为子视图添加了一个 ui-view 控件。适合吗？

<nav> 
    <a ui-sref="state1" ui-sref-active="active">State 1</a>
    <a ui-sref="state2" ui-sref-active="active">State 2</a>
</nav>

<div ui-view></div>

var myApp = angular.module("myApp",[ "ui.router", "AppCtrls"]);

myApp.config(function ($stateProvider, $urlRouterProvider){
    $stateProvider.state("state1", {
        url: "/state1",
        template: "<p>State 1 <a ui-sref='.state3'>details</a><ui-view /></p>",
      })
      .state("state2", {
        url: "/state2",
        template: "<p>State 2</p>",
      })
      .state('state1.state3', {
            url: "/state3",
            template: "<h2>state1 details</h2>",
        });
});

var ctrls = angular.module("AppCtrls", []);

http://jsfiddle.net/jahn08/f1owscs5/