UI路由器状态的多个视图不起作用.未报告错误

multiple views in ui-router state not working .. no errors reported

本文关键字：不起作用 报告 错误 视图 路由器 状态 UI      更新时间：2023-09-26

嗨，我正在处理一个单一状态的多个嵌套视图，就像在这个 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');
})

不完全确定您要实现的目标，但我更新了您的 plunker 以使其运行（只是运行）

我首先使用了这个说法：

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

原因？我们必须传递状态 URL，而不是它的名称

此外，主状态是抽象的，因此我们需要导航到某个不是的状态。 这将是子级，其 URL 必须与其他状态匹配。正如 doc 所说，我们可以这样做：

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

看：

如何：设置默认/索引子状态

为"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

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

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

将抽象设置为 true 会使状态不可激活。从文档中：

抽象状态可以有子状态，但不能被激活 本身。"抽象"状态只是一种不可能的状态 过渡到。当它的一个隐式激活时 后代被激活。

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

相关文章：