Question

我是Ionic和AngularJS的新手所以我正在努力（希望）一些简单的事情。我有这两种状态：

.state('menu', {
        url: '/mobile/beer',
        controller: 'beerCtrl',
        templateUrl: 'templates/beer-menu.html'
})
.state('detail', {
        url: '/mobile/beer/:id',
        controller: 'beerDetailCtrl',
        templateUrl: 'templates/beer.html',
        resolve: {
           beer: function($stateParams, beerService) {
              return beerService.findBeerById($stateParams.id) 
           }
        }
})

'menu'状态从服务器获取所有啤酒，并将列表交给'beer-menu.html'，其中包含显示列表的离子列表。当用户在列表中选择啤酒时，“细节”表示步骤以显示关于啤酒的更多细节。

这一切都有效，但我希望通过使用抽象状态来改进它：

.state('beer', {
        abstract: true,
        url: '/mobile/beer'
    })
.state('beer.menu', {
        url: '',
        controller: 'beerCtrl',
        templateUrl: 'templates/beer-menu.html'
    })
.state('beer.detail', {
        url: '/:id',
        controller: 'beerDetailCtrl',
        templateUrl: 'templates/beer.html',
        resolve: {
           beer: function($stateParams, beerService) {
             return beerService.findBeerById($stateParams.id) 
           }
       }
})

对我而言看起来完全没问题 - 尤其是因为这是基于Ionic Framework网站上的一个“公式”。然而，当我构建这样的状态时，应用程序停止工作。我试图以各种方式调整它，但无法让它工作。你看到了什么问题吗？

Answer 1

作为UI-Router文档，您还必须为抽象状态'beer'定义模板：

请记住：抽象状态仍然需要他们自己的<ui-view/>才能让他们的孩子插入。因此，如果您使用抽象状态只是为了添加网址，设置解析/数据，或运行onEnter / Exit函数，那么您还需要设置模板：“<ui-view/>”。

请参阅： https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views#abstract-states

我的Ionic / Angular状态继承有什么问题？

1 个答案: