Angular ui-view默认/正确使用:

时间:2016-05-08 20:42:20

标签: angularjs angular-ui-router angular-ui

这适用于'子集'查看我的主视图,其中有一个标签栏(地图,市场和图表)。单击它们时,它们将通过UiSref在此标记中正确输出。

 <div ui-view name="inception2"></div>

3个视图在我的路线文件中定义,如下所示。

如何将uiViewName中的视图默认为tsView2?目前我需要点击才能路由。我再次设置了一个路由器文件,它具有抽象状态和所有 - 这仅适用于现有项目中的简单选项卡练习。谢谢!

.state('tsView1', {
  views: {
    'inception2': {
      templateUrl: 'client/templates/tsVview1.html'
    }
  } 
})

.state('tsView2', {
  views: {
    'inception2': {
      templateUrl: 'client/templates/tsView2.html'
    }
  } 
})

.state('tsView3', {
  views: {
    'inception2': {
      templateUrl: 'client/templates/tsView3'
    }
  } 
})

2 个答案:

答案 0 :(得分:1)

使用$urlRouterProvider使用otherwise方法配置默认路由

.state('tsView2', {
  url: '/tsview2',
  views: {
    'inception2': {
     templateUrl: 'client/templates/tsView2.html'
   }
  } 
})


$urlRouterProvider.otherwise('/tsview2');

有关$urlRouterProvider的详细信息,请参阅:https://github.com/angular-ui/ui-router/wiki/URL-Routing#urlrouterprovider

答案 1 :(得分:1)

您可以尝试此解决方案

Redirect a state to default substate with UI-Router in AngularJS

介绍一个小型引擎,阅读设置 redirectTo

app.run(['$rootScope', '$state', function($rootScope, $state) {

    $rootScope.$on('$stateChangeStart', function(evt, to, params) {
      if (to.redirectTo) {
        evt.preventDefault();
        $state.go(to.redirectTo, params)
      }
    });
}]);

然后在其上应用默认

.state('main', {
  redirectTo: 'tsView2',
  ...
  }
.state('tsView2', {
  parent: 'main'
  ...
  }

这个,换句话说,要求tsViews是孩子......但我想它已经应该是真的了

  

这是我的主视图的“子集”视图,我有...