Question

我正在尝试设置一个具有多个屏幕的应用程序，而某些屏幕应该有子屏幕。标签工作正常，并与正确的模板链接，但子页面不起作用。我甚至无法浏览到设定的网址。当我点击图标时，它会转到我在其他方法中设置的默认值。

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>

我是离子的新手，不知道为什么这不起作用。我认为创建路径或网址存在问题

Answer 1

您正在使用的地方：

href="#/tab/aboutApps/pricing"

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

ui-sref="tab.aboutApps.pricing"

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

您可以在此处详细了解：

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

离子设置子页面

1 个答案: