Question

您好我正在处理单个状态中的多个嵌套视图，就像在这个plunkr [http://plnkr.co/edit/FKdwViJllUKGoYIAWIED?p=preview]但它不会工作，我不会发生任何错误...完全卡住任何帮助高度赞赏。我的配置块

.config(function($stateProvider,$urlRouterProvider){
  $stateProvider.
  state('home',{
    url: '/',
    views: {
      'funeralhomes': {
        templateUrl: './funeralhome.tpl.html',
        controller: 'FuneralCtrl',
        resolve: {
          funeralhomes : ['FuneralHomes',function(FuneralHomes){
            return FuneralHomes.list;
          }]
        }
      },
      'caskets':{
        templateUrl: './casket.tpl.html',
        controller: 'CasketCtrl',
        resolve:{
          caskets: ['Caskets',function(Caskets){
            return Caskets.list;
          }]
        }
      },
      'foods':{
        templateUrl: './food.tpl.html',
        controller: 'FoodCtrl',
        resolve: {
          foods: ['Foods',function(Food){
            return Food.list;
          }]
        }
      },
      'officiants':{
        templateUrl: './officiant.tpl.html',
        controller: 'OfficiantCtrl',
        resolve: {
          officiants: ['Officiants',function(Officiants){
            return Officiants.list;
          }]
        }
      },
      'flowers':{
        templateUrl: './flower.tpl.html',
        controller: 'FlowersCtrl',
        resolve: {
          flowers: ['Flowers',function(Flowers){
            return Flowers.list;
          }]
        }
      },
      'donations':{
        templateUrl: './donation.tpl.html',
        controller: 'DonationsCtrl',
        resolve: {
          donations: ["Donations",function(Donations){
            return Donations.list;
          }]
        }
      },
      'monuments':{
        templateUrl: './monument.tpl.html',
        controller: 'MonumentCtrl',
        resolve: {
          monuments: ['Monuments',function(Monuments){
            return Monuments.list;
          }]
        }
      }
    },
    abstract: true,
    controller: 'HomeCtrl'
  })
  .state('home.login',{
    templateUrl: './login.tpl.html',
    controller: 'LoginCtrl'
  });

  $urlRouterProvider.otherwise('home');
})

Answer 1

不完全确定您尝试实现的目标，但我updated your plunker使其运行（仅运行）

我首先使用了这句话：

// instead of this - state name
// $urlRouterProvider.otherwise('home');
// we have to use url 
$urlRouterProvider.otherwise('/');

原因？我们必须传递州网址，而不是它的名字

此外，家庭状态是抽象的，所以我们需要导航到一些不是的状态。这将是孩子，必须具有与之匹配的URL。正如医生所说，我们可以这样做：

.state('home.login',{
    // new line - the otherwise is in fact also matching this non abstract state
    url : '',
    templateUrl: './login.tpl.html',
    controller: 'LoginCtrl'
  });

见：

How to: Set up a default/index child state

将'parent.index'状态设为空网址。这将使其与父状态URL匹配相同的URL，因为它不会向父URL添加任何内容。

$stateProvider
    .state('parent', {url: '/home', abstract: true, template: '<ui-view/>'} )
    // ALSO url '/home', overriding its parent's activation
    .state('parent.index', {url: ''} )

检查更新的plunker here

Answer 2

您的代码段不起作用，因为您在主页状态下将抽象设置为true：

 },
    abstract: true,  // remove this
    controller: 'HomeCtrl'
  })
  .state('home.login',{
    templateUrl: './login.tpl.html',
    controller: 'LoginCtrl'

将 abstract 设置为true，使状态不可激活。来自文档：

抽象状态可以具有子状态但无法激活本身。 “抽象”状态只是一种不可能的状态过渡到。当其中一个时，它会被隐式激活后代被激活。

参考：https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

ui-router状态下的多个视图无法正常工作..没有报告错误

2 个答案:

How to: Set up a default/index child state