AngularJS : How do I nest a view within a parent state with parameters?

Question

我正在使用 Ionic Framework 创建移动应用程序，但我在使用 UI Router 时遇到了困难。我已经有几个屏幕正常工作，但我似乎无法让嵌套 View 在带有参数的状态下工作。我想要一个类似于 /legislator/1/profile 的 URL。它将有一个标题，其中包含立法者 #1 的姓名和下面的选项卡。个人资料选项卡将自动可见，单击其他选项卡(例如 /legislator/1/votes)将更改内容，但不会更改标题

我最终放弃了选项卡和侧菜单启动项目来自定义我的嵌套 View 。这是我在 app.js 中的内容。 home 和 people.* 状态工作正常，但我似乎无法在配置文件 View 就位的情况下加载立法者屏幕。我尝试过更改抽象和 Controller 属性，但还没有成功。

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

  .state('home', {
    url: "/home",
    templateUrl: "templates/home.html",
    controller: "homeController"
  })

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

  .state('people.legislators', {
    url: "/legislators",
    templateUrl: "templates/legislators.html",
    controller: "legislatorController"
  })

  .state('people.following', {
    url: "/following",
    templateUrl: "templates/following.html",
    controller: "followingController"
  })

  .state('legislator', {
    url: "/legislator/{legislatorId:int}",
    templateUrl: "templates/legislator.html",
    abstract: true
  })

  .state('legislator.profile', {
    url: "/legislator/{legislatorId:int}/profile",
    templateUrl: "templates/legislator.profile.html",
    controller: "profileController"
  })

  .state('legislator.votes', {
    url: "/legislator/{legislatorId:int}/votes",
    templateUrl: "templates/legislator.votes.html",
    controller: "votelistController"
  })

  $urlRouterProvider.otherwise('/home');
  // if none of the above states are matched, use this as the fall-back
})

这个场景在 UI Router 中应该如何工作？配置 $stateProvider 后，选项卡应如何链接到嵌套状态？

感谢您给我的任何帮助。

Answer 1

也许您的解决方案就像将经典 href 替换为 Ui Router's ui-sref 一样简单:

替换

<ion-tab ... href="#/legislator/{ scopeLegislatorId }/profile">...</ion-tab>

由

<ion-tab ... ui-sref="legislator.profile({ legislatorId: scopeLegislatorId })">...</ion-tab>

其中 scopeLegislatorId 是legislatorId，可从您的范围获取。

如果这没有帮助，请向我们提供您的 html 文件(例如 legislator.html 和 legislator.profile.html)。