Angular ui-路由器...显示默认选项卡

Question

我正从其他 link 到达 bookDetails 州。这里 bookDetails 州的模板有 link 用于不同的 tabs（或模板）。关联的控制器 EditBookController 有一个 json 文件，我使用它在不同的 tabs 中构建表单，其中 bookDetails.basic 和 bookDetails.publisher 等状态使用父级 EditBookController.它工作正常。如何直接显示默认的bookDetails.basic而不是让用户点击link？如果我制作 bookDetails abstract(abbstract:true) 并向 bookDetails.basic 提供一个空的 link 我会收到以下错误 Cannot transition to abstract state 'bookDetails'

    $urlRouterProvider.otherwise('/home');

    $stateProvider
    .state('home', {              
              url:'/home',
              controller: 'HomeController',
              templateUrl: '/static/publisher/views/Publisher_Home_Template.html'
          })
    .state('books', {
              url:'/books',
              controller: 'BooksController',
              templateUrl: '/static/publisher/views/Book_Listing_Template.html'
          })          
    .state('bookDetails', {
              url : '/books/:b_id',                

              controller: 'EditBookController',                  
              templateUrl: '/static/publisher/views/Product_Page_Template.html'
          }) 

    .state('bookDetails.basic', {
              url : '/basic',                  
              templateUrl: '/static/publisher/views/tab1.html'
          }) 

    .state('bookDetails.publisher', {
              url : '/publisher',                  
              templateUrl: '/static/publisher/views/tab2.html'
          })

A plunk with similar problem. but code is different 单击表单时，它应该会出现在配置文件配置文件表单上。

Answer 1

尝试在 EditBookController 中添加 $state.go('bookDetails.basic')。如果我理解你<这会有所帮助。

Answer 2

来自Directing the user to a child state when they are transitioning to its parent state using UI-Router：

要么将 bookDetails.basic 状态更改为：

.state('bookDetails.basic', {
  url : '',                  
  templateUrl: '/static/publisher/views/tab1.html'
})

或添加如下路由：

$urlRouterProvider.when('/books/{b_id}', '/books/{b_id}/basic');

Answer 3

我创建了working example here

有类似问题：

解决方案来自一个很酷的 "comment"，它与使用 .when() 的重定向问题有关 () 和非常酷的解决方案 （Chris T，但最初的 post 是 yahyaKacem）

https://github.com/angular-ui/ui-router/issues/1584#issuecomment-75137373

在状态定义中，我只向 bookDetails 状态添加了一个设置，即：redirectTo: 'bookDetails.basic',。一起来看看：

$urlRouterProvider.otherwise('/home');

$stateProvider
.state('home', {              
          url:'/home',
          controller: 'HomeController',
          templateUrl: '/static/publisher/views/Publisher_Home_Template.html'
      })
.state('books', {
          url:'/books',
          controller: 'BooksController',
          templateUrl: '/static/publisher/views/Book_Listing_Template.html'
      })          
.state('bookDetails', {
          // NEW LINE
          redirectTo: 'bookDetails.basic',
          url : '/books/:b_id',
          controller: 'EditBookController',                  
          templateUrl: 'static/publisher/views/Product_Page_Template.html'
      }) 

.state('bookDetails.basic', {
          url : '/basic',                  
          templateUrl: '/static/publisher/views/tab1.html'
      }) 

.state('bookDetails.publisher', {
          url : '/publisher',                  
          templateUrl: '/static/publisher/views/tab2.html'
      })

现在 - 只有这几行才能创造奇迹：

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

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

这样我们就可以用它的默认重定向来调整我们的任何状态...检查它here

Angular ui-路由器...显示默认选项卡

Angular ui-router... Display default tab

angularjs

angular-ui-router