Question

我从bookDetails状态到达其他链接。此处bookDetails州的模板包含不同tabs（或模板）的链接。关联的控制器EditBookController有一个json文件，我使用该文件在不同的tabs中构建表单，其中bookDetails.basic和bookDetails.publisher等状态使用父EditBookController。它工作正常。如何直接显示默认bookDetails.basic而不是让用户点击链接？如果我使bookDetails抽象（abbstract：true）并提供指向bookDetails.basic的空链接，则会出现以下错误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

我创建了working example here

有类似的问题：Redirect a state to default substate with UI-Router in AngularJS

该解决方案来自与使用 .when() （{{3}重定向问题相关的酷＆＃34;评论＆＃34; <}>）和非常酷的解决方案（由Chris T撰写，但原帖是yahyaKacem）

https://stackoverflow.com/a/27131114/1679310

在状态定义中，我只添加了一个设置为 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)
      }
    }
  );
}]);

这样我们可以使用默认重定向调整任何状态...检查https://github.com/angular-ui/ui-router/issues/1584#issuecomment-75137373

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

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

Angular ui-router ...显示默认选项卡

3 个答案: