Question

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

如何避免这种情况？

以下是该问题的代码。

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: '',
    });

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

1 个答案: