多个抽象视图 - Ionic

Question

我正在使用ionic 构建一个项目，其中ui-router 处理的不同视图需要嵌套在一起。这是处理ui-view 的states 的代码部分：

$stateProvider

// setup an abstract state for the tabs directive
.state('filters', {
  url: '/filters',
  abstract: true,
  templateUrl: 'templates/filters.html'
})

// and one for the search bar
.state('search', {
  url: '/search',
  abstract: true,
  templateUrl: 'templates/search.html'
})

// Each tab has its own nav history stack:
.state('filters.search.locations', {
  url: '/locations',
  views: {
    'tab-locations': {
      templateUrl: 'templates/tab-locations.html',
      controller: 'LocationsCtrl'
    }
  }
})

.state('filters.search.job-categories', {
  url: '/job-categories',
  views: {
    'tab-job-categories': {
      templateUrl: 'templates/tab-job-categories.html',
      controller: 'JobCategoriesCtrl'
    }
  }
})

.state('filters.search.levels', {
  url: '/levels',
  views: {
    'tab-levels': {
      templateUrl: 'templates/tab-levels.html',
      controller: 'LevelsCtrl'
    }
  }
});

如您所见，我的意图是将状态 filters 和 search 组合在一起并将它们显示在一起，但显然我做错了什么。你知道我的代码有什么问题吗？

提前感谢您的回复！

Answer 1

看看这个：

  $stateProvider

    .state('filters', {
      url: '/filters',
      abstract: true,
      templateUrl: 'templates/filters.html'
    })

    // note this ...
    .state('filters.search', {
      url: '/search',
      abstract: true,
      templateUrl: 'templates/search.html'
    })

    .state('filters.search.locations', {
      url: '/locations',
      views: {
        'tab-locations': {
          templateUrl: 'templates/tab-locations.html',
          controller: 'LocationsCtrl'
        }
      }
    })

    //and so on ...