Ionic 设置子页面

Question

我正在尝试设置一个具有多个屏幕的应用程序，一些屏幕应该有子屏幕。选项卡工作正常并与正确的模板链接，但子页面不工作。我什至不能浏览集合 urls。当我点击图标时，它会变成我在其他方法中设置的默认值。

APP JS文件

  $stateProvider

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

// Each tab has its own nav history stack:

.state('tab.home', {
   url: '/home',
      views: {
      'tab-home': {
       templateUrl: 'templates/tab-home.html',
       controller: 'HomeCtrl'
      }
   }
})

.state('tab.aboutApps', {
   url: '/aboutApps',
   views: {
     'tab-aboutApps': {
      templateUrl: 'templates/tab-aboutApps.html'
    }
  }
})
.state('tab.aboutApps.pricing', {
   url: '/aboutApps/pricing',
   views: {
     'detail-pricing': {
         templateUrl: 'templates/detail-pricing.html'
     }
   }
})
.state('tab.aboutApps.features', {
    url: '/features',
    views: {
       'detail-features': {
          templateUrl: 'templates/detail-features.html'
       }
    }
})

HTML

<ion-item class="text-wrap" href="#/tab/aboutApps/features">
    <p>Features</p>
    <ion-nav-view title="Features" name="detail-features" class="text-wrap"</ion-nav-view>
</ion-item>
<ion-item class="text-wrap" href="#/tab/aboutApps/pricing">
    <p>Pricing</p>
    <ion-nav-view title="Pricing" name="detail-priceing" class="text-wrap"></ion-nav-view>
</ion-item>

我是 ionic 的新手，不明白为什么这行不通。我认为创建路径时出现问题或 url

Answer 1

您使用的地方：

href="#/tab/aboutApps/pricing"

在你的离子项目上，将其更改为：

ui-sref="tab.aboutApps.pricing"

这是一个将 link 绑定到状态的指令。

您可以在此处阅读更多相关信息：

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref

Ionic 设置子页面

Ionic setting up subpages

url-routing

ionic-framework