AngularJS - 将父路由重定向到子路由

父模板Accueil（其中没有内容）有两个子模板section1和section2。这是用于路由代码：AngularJS - 将父路由重定向到子路由

$urlRouterProvider.otherwise('/accueil/section1'); 
    $stateProvider 
     .state('accueil', { 
      url: '/accueil', 
      templateUrl: 'pages/accueil.html' 
     }) 
     .state('accueil.section1', { 
      url: '/section1', 
      templateUrl: 'templates/section1.html' 
     }); 
     .state('accueil.section2', { 
      url: '/section2', 
      templateUrl: 'templates/section2.html', 
      controller: 'sectionCtrl' 
     })

这工作得很好，如果我去/accueil/secion1或/accueil/section2。问题是，当我去/accueil（没有内容），我不知道如何将其重定向到第一个子模板。有任何想法吗？

来源

2015-03-02 Mehdiway

你永远都不想真正去状态ACCUEIL？如果是这样的干净的解决方案将是使双亲状态抽象并更改网址的第一个孩子为“”，如下：

$urlRouterProvider.otherwise('/accueil'); 
$stateProvider 
    .state('accueil', { 
     url: '/accueil', 
     templateUrl: 'pages/accueil.html', 
     abstract: true 
    }) 
    .state('accueil.section1', { 
     url: '', 
     templateUrl: 'templates/section1.html' 
    }); 
    .state('accueil.section2', { 
     url: '/section2', 
     templateUrl: 'templates/section2.html', 
     controller: 'sectionCtrl' 
    })

现在，如果您导航只是为了/ ACCUEIL你会去SECTION1，并附加一个/第2节到第2节

来源

2015-03-02 12:19:55

感谢您的回答。虽然我不得不将默认路由改为'.otherwise（'/ accueil'）;'因为'/ accueil/section1'不存在，所以它可以工作 – Mehdiway 2015-03-02 12:27:34

我以前的评论现在没有任何意义：D – Mehdiway 2015-03-02 12:28:58

正确的电话，更新我的后代的答案 – 2015-03-02 12:28:59

该解决方案（在UI的路由器设计）在这里解释说：

我们可以使用.when()，像：

$urlRouterProvider 
    .when('/accueil', ['$state', 'myService', function ($state, myService) { 
     $state.go('accueil.section1'); 
}]) 
.otherwise('/app');

但是在UI-Router 0.2.13中有一些差异吨的方法：

var onChangeConfig = ['$rootScope', '$state', 
function ($rootScope, $state) { 

    $rootScope.$on('$stateChangeStart', function (event, toState) {  
    if (toState.name === "accueil") { 
     event.preventDefault(); 
     $state.go('accueil.section1'); 
    } 
    }); 

}]

而且还有这里https://github.com/angular-ui/ui-router/issues/1584

的plunker讨论了0.2.13建议

http://plnkr.co/edit/dcN7Qra6nY9ZTOGjgCvJ?p=preview

和示例

$stateProvider.state('profile' , { 
     url: "/about", 
     templateUrl: "profile.html", 
     redirectTo: 'profile.about' 
    }); 

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

看到它在行动上面plunkr的一个分支是@yahyaKacem发布：

来源

2015-03-02 12:18:24

我想我要去@Joshua Ohana的答案：D – Mehdiway 2015-03-02 12:29:08

我觉得这个效果很好 – nikoloza 2015-03-23 12:25:32

AngularJS - 将父路由重定向到子路由

回答

相关问题