Angular ui-router... 显示默认选项卡 [英] Angular ui-router... Display default tab

问题描述

我正在通过其他链接到达 bookDetails 状态.这里bookDetails 状态的模板有不同tabs(或模板)的链接.和关联的控制器 EditBookController 有一个 json 文件，我使用它在不同的 tabs 中构建表单，状态像 bookDetails.basic 和 bookDetails.使用父 EditBookController 的发布者.它工作正常.如何直接显示默认的 bookDetails.basic 而不是让用户点击链接?如果我使 bookDetails 抽象(abbstract:true)并提供一个指向 bookDetails.basic 的空链接，我会收到以下错误 Cannot transition to abstract state 'bookDetails'

I am arriving on bookDetails state form some other link. Here bookDetails state's template has links for different tabs (or templates). And associated controller EditBookController has a json file using which I am building forms in different tabs with states like bookDetails.basic and bookDetails.publisher which use parent EditBookController. It's working fine. How to directly display the default bookDetails.basic instead of making user click the link? If I make bookDetails abstract(abbstract:true) and provide an empty link to bookDetails.basic I get following error 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 On clicking form it should land on the profile profile form.

推荐答案

我在这里创建了工作示例

有类似的问题:使用 AngularJS 中的 UI-Router 将状态重定向到默认子状态

该解决方案来自一个很酷的评论"，该评论与使用 .when() (https://stackoverflow.com/a/27131114/1679310) 和非常酷的解决方案(由 Chris T 撰写，但原帖由 yahyaKacem 撰写)

The solution comes from a cool "comment" related to an issue with redirection using .when() (https://stackoverflow.com/a/27131114/1679310) and really cool solution for it (by Chris T, but the original post was by yahyaKacem)

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

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

In the state definition I added ONLY one setting to bookDetails state, the: redirectTo: 'bookDetails.basic',. Let's have a look:

$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'
      })  

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

And now - only these few lines will do the miracle:

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

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

通过这种方式，我们可以使用默认重定向来调整我们的任何状态......检查它这里

This way we can adjust any of our states with its default redirection...Check it here

这篇关于Angular ui-router... 显示默认选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！