Question

我正在使用Ionic Framework创建移动应用，但我在使用UI路由器时遇到了困难。我已经让一些屏幕正常工作，但我似乎无法在具有参数的状态下使用嵌套视图。我想要一个看起来像/legislator/1/profile的网址。它将有一个标题，名称为立法者＃1和下面的标签。配置文件选项卡将自动显示，单击其他选项卡（例如/legislator/1/votes）将更改内容，但不会更改标题

我放弃了标签＆amp; amp; sidemenu starter项目来自定义我的嵌套视图。这是我在app.js中所拥有的。家庭和人员。*州工作正常，但我似乎无法加载立法者屏幕，并且配置文件视图到位。我试过改变摘要＆amp;控制器属性，但没有运气。

.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路由器中运行？一旦配置了$ stateProvider，标签应如何链接到嵌套状态？

感谢您提供任何帮助。

Answer 1

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

替换

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

通过

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

scopeLegislatorId是立法者ID，可从您的范围获得。

如果这样做无效，请向我们提供您的html文件（例如legislator.html和legislator.profile.html）。

Answer 2

RobYed指出我正确的方向来找出定义我的状态的正确方法。这是我结束的骨头。

app.js：

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

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

模板/ legislator.header.html：

<ion-nav-view animation="slide-left-right">
  <div class="bar bar-header" ng-controller="profileController">
    {{legislator.name}}
  </div>
  <div class="tabs tabs-striped tabs-top">
    <a class="tab-item" ui-sref="legislator.profile" ng-class="{selected: is('legislator.profile')}">
      {{'Profile' | translate}}
    </a>
    <a class="tab-item" ui-sref="legislator.votes"   ng-class="{selected: is('legislator.votes')}">
      {{'Votes' | translate}}
    </a>
    <a class="tab-item" ui-sref="legislator.stats"   ng-class="{selected: is('legislator.stats')}">
      {{'Stats' | translate}}
    </a>
  </div>
  <div ui-view></div>
</ion-nav-view>

模板/ legislator.profile.html：

<ion-content>
  <div class="bar bar-stable has-subheader" style="height:145px;">
    {{legislator.whatever}}
    Content Here
  </div>
</ion-content>

profileController.js：

'use strict';
angular.module('myApp').controller('profileController', function($scope, $rootScope) {
  $scope.legislator = $rootScope.legislators[$stateParams.seq_no-1];
});

其他州的链接：

<a ui-sref="legislator.profile({seq_no:legislator.seq_num})"></a>

AngularJS：如何在具有参数的父状态中嵌套视图？

3 个答案: