ionic框架中调用视图的Ui-router问题

ui-router issue in ionic framework calling views

本文关键字:Ui-router 问题 视图 调用 框架 ionic      更新时间:2023-09-26

我在ionic框架中有一个应用程序,大部分使用标签示例。但是,在其中一个视图中,我希望用户能够单击一个项目并进入基于该项目的另一个视图。

但是,无论何时单击一个项,它都会加载正确的视图,但不会调用该视图的模板文件。

这是我在路由器中的内容(注意不相关的部分被忽略了)

$stateProvider.state('tab', {
  url: "/tab",
  abstract: true,
  templateUrl: "templates/tabs.html"
}).state('tab.dash', {
  url: '/dash',
  views: {
    'tab-dash': {
      templateUrl: 'templates/tab-dash.html',
      controller: 'LoginController'
    }
  }
}).state('tab.friend-detail', {
  url: '/friend/:friendId',
  views: {
    'tab-friends': {
      templateUrl: 'templates/friend-detail.html',
      controller: 'FriendDetailCtrl'
    }
  }
}).state('tab.buy', {
  url: '/buy',
  views: {
    'tab-buy': {
      templateUrl: 'templates/buy.html', 
      controller: 'PaymentController'
    }
  }
}).state('tab.account', {
  url: '/account',
  views: {
    'tab-account': {
      templateUrl: 'templates/tab-account.html',
      controller: 'AccountController'
    }
  }
}).state('tab.order', {
  url: '/account/order/:id', 
  views: {
    'tab-order': {
      templateUrl: 'templates/order-view.html', 
      controller: 'OrderController'
    }
  }
})

urlRouterProvider.otherwise美元(/标签/dash);

在我的控制器中我有:

$scope.viewOrder = function(id) {   
    $state.go('tab.order', {id:id});
};

在templates/tab-account.html中我有:

<ion-view title="Account">
<ion-content class="has-header padding">
<h1>Account</h1>
<h2>Your orders</h2>
<div class="card" ng-repeat="booking in bookings">
  <div class="item item-text-wrap">
    <b><a ng-click="viewOrder(booking.id)">{{ booking.carpark.city }}</a></b> on <b>{{ booking.date | date:'dd.mm.yyyy' }}</b>
  </div>
</div>

则项目特定视图如下:

<ion-view title="Order">
  <ion-content class="has-header padding">
      <h1>Your Order</h1>
      <p>Test</p>
      Order #: {{orderNumber}}
  </ion-content>
</ion-view>

最后一个视图基本上不会出现,即使url从tab/account变为/tab/account/order/1

我最近问了几个关于ionic的StackOverflow问题,如果人们一直遇到这些问题并认为我是个白痴,我很抱歉:/

提前感谢!

在基视图中需要一个ui-view。当你嵌套状态时,嵌套视图显示在基本视图中,无论你有一个ui-view元素:<div ui-view></div> .