与UI路由器嵌套子状态 [英] Nested child state with ui-router

问题描述

由于我工作的一个角的应用程序，我想知道 UI的路线嵌套状态。

如实况，它可以创建嵌套的状态，如（从商务部获得）：

  $ stateProvider
   .STATE（'联系人'，{
     templateUrl：contacts.html'，
     控制器：函数（$范围）{
       $ scope.contacts = [{名称：'爱丽丝'}，{名称：'鲍勃'}]
     }
   }）
   .STATE（'contacts.list'，{
     templateUrl：contacts.list.html
   }）;
 

但是，它可以创建一个granchild状态？ （可能通过添加类似）：

  .STATE（'contacts.list.state'，{
   templateUrl：html_file.html
 ）}
 

解决方案

是的，你可以那样做，如你所说。 EG：

  $ stateProvider
  .STATE（'联系人'，{
    网址：'/'，
    templateUrl：contacts.html'，
    控制器：函数（$范围）{
       $ scope.contacts = [{名称：'爱丽丝'}，{名称：'鲍勃'}]
     }
  }）
  .STATE（'contacts.list'，{
    网址：'：名单，
    templateUrl：接触-list.html
  }）
  .STATE（'contacts.list.fullDetails'，{
    网址：'/ fullDetails'，
    templateUrl：联系人列表 - 全details.html
  }）;
 

As I'm working on an Angular app, I was wondering about ui-route nested states.

As said in the docu, it's possible to create nested state such as (taken from the doc) :

 $stateProvider
   .state('contacts', {
     templateUrl: 'contacts.html',
     controller: function($scope){
       $scope.contacts = [{ name: 'Alice' }, { name: 'Bob' }];
     }
   })
   .state('contacts.list', {
     templateUrl: 'contacts.list.html'
   });

But is it possible to create a granchild state ? (possibly by adding something like) :

 .state('contacts.list.state', {
   templateUrl: 'html_file.html'
 )}

解决方案

Yes, you can do it like that, as you suggested. EG:

$stateProvider
  .state('contacts', {
    url: '/',
    templateUrl: 'contacts.html',
    controller: function($scope){
       $scope.contacts = [{ name: 'Alice' }, { name: 'Bob' }];
     }
  })
  .state('contacts.list', {
    url: ':list',
    templateUrl: 'contacts-list.html'
  })
  .state('contacts.list.fullDetails', {
    url: '/fullDetails',
    templateUrl: 'contacts-list-full-details.html'
  });

这篇关于与UI路由器嵌套子状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！