单击导航栏图标时，Angular ui-router 状态不会更改为主状态

Question

我正在使用 ui-router 在使用状态的页面之间导航。我已经使用不同页面中名为 tabs.html 的状态创建了选项卡。在将状态从主页更改为 mainTab 时，我可以成功移动到 MainTab 页面并选择第一个选项卡（mainTab.tab1）。但是，当我使用 $state.go(home) 单击导航栏图标转到主页时，状态会更改为第三个选项卡（mainTab.tab3），再次单击导航栏时，状态会更改为主页。

如何避免这种情况？

以下是问题的代码。

app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
    .state('home', {
        url: '/home',
        templateUrl: '',                       
        controller: ''
    })
    .state('mainTab', {
        url: '/mainTab',
        templateUrl: '',                       
        controller: '',
    })  
    .state("mainTab.tab1", {
        url:"mainTab/tab1",
        templateUrl: "",    
        controller: '',
    })
    .state("mainTab.tab2", {
        url:"mainTab/tab2",
        templateUrl: "",
        controller: '',
    })
    .state("mainTab.tab3", {
        url:"mainTab/tab3",
        templateUrl: "",
        controller: '',
    });
    $urlRouterProvider.otherwise('home');

});

这就是标签的创建方式：

$scope.tabs= [
  {
    heading: 'Tab1',
    route:   'mainTab.tab1',
    active:false
  },
  {
    heading: 'Tab2',
    route:   'mainTab.tab2',
    active:false
  },
  {
    heading: 'Tab3',
    route:   'mainTab.tab3',
    active:false
  }
];

tabs.html

<div id="wrapper">
<div id="page-wrapper">
    <div class="row">
        <div class="col-md-12">          
            <tabset>
                <tab
                    ng-repeat="t in tabs"
                    heading="{{t.heading}}"
                    select="goTo(t.route)"
                    active="t.active"
                    >
                </tab>
            </tabset>
            <div ui-view></div>
        </div>
    </div>
</div>

goTo()函数是这样的

$scope.goTo = function(route){ $state.go(route); }

非常感谢任何输入。谢谢

Answer 1

试试这个，因为当你创建路由时，它看起来像mainTab/mainTab/tab1。它也需要父状态 URL。

$stateProvider
    .state('home', {
        url: '/home',
        templateUrl: '',
        controller: ''
    })
    .state('mainTab', {
        url: '/mainTab',
        templateUrl: '',
        controller: '',
    })
    .state("mainTab.tab1", {
        url: "/tab1",
        templateUrl: "",
        controller: '',
    })
    .state("mainTab.tab2", {
        url: "/tab2",
        templateUrl: "",
        controller: '',
    })
    .state("mainTab.tab3", {
        url: "/tab3",
        templateUrl: "",
        controller: '',
    });