Ionic:带有选项卡和侧菜单导航问题的主详细信息

Ionic: Master Detail with tabs and side menu navigation issue?

本文关键字:导航 菜单 问题 详细信息 选项 Ionic      更新时间:2023-09-26

我的应用程序使用选项卡、侧边菜单和主详细信息模式。但是,由于某种原因,我不知道如何让它导航到列表中项目的详细信息页面。几天来我一直在试图弄清楚,但我对离子和棱角相很陌生......

如果有人能告诉我出了什么问题,我将不胜感激。

标签提要.html

<ion-view view-title="Feed">
  <ion-nav-buttons side="right">
    <button class="button icon ion-funnel" ng-click="modal2.show()">
    </button>
  </ion-nav-buttons>
  <ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
  </ion-nav-buttons>  
  <ion-content>
    <label class="item item-input">
    <i class="icon ion-search placeholder-icon"></i>
    <input type="search" placeholder="Search" ng-model="search">
  </label>
    <ion-list>
      <ion-item class="item item-thumbnail-left" ng-repeat="event in events | orderBy:'name' | searchEvents:search" type="item-text-wrap" href="#/feed/{{event.name}}">
<!--      <ion-item class="item item-thumbnail-left" ng-repeat="event in events" type="item-text-wrap" ui-sref="event({eventId:event.id})">-->
          <img ng-src="http://placehold.it/300x300">
          <h2>{{event.name}}</h2>
          <p><i class="ion-clock"></i> {{event.date | date: 'MM/dd/yy'}} | {{event.time | date: 'shortTime'}}</p>
          <p><i class="ion-location"></i> {{event.location}}</p>
      </ion-item>
    </ion-list>
  </ion-content>
  <ion-footer-bar align-title="center" class="bar-positive">
      <div class="title" ng-click="modal.show()">Add Event</div>
  </ion-footer-bar>
</ion-view>

选项卡.html

<ion-view view-title="Tabs">
  <ion-tabs class="tabs-icon-top tabs-positive">
  <!-- Feed Tab -->
<!--  <ion-tab title="The Feed" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" ui-sref="app.tabs.feed">-->
  <ion-tab title="The Feed" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/feed">
    <ion-nav-view name="tab-feed"></ion-nav-view>
  </ion-tab>
</ion-tabs>
</ion-view>

应用.js

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('login', {
      url: '/login',
      controller: 'LoginCtrl',
      templateUrl: 'templates/login.html'
    })
    .state('tabs', {
      url: '/tab',
      controller: 'TabsCtrl',
      templateUrl: 'templates/tabs.html'
    })
    .state('tabs.feed', {
      url: '/feed',
      views: {
        'tab-feed': {
          templateUrl: 'templates/tab-feed.html',
          controller: 'FeedCtrl'
        }
      }
    })  
    .state('tabs.event-detail', {
      url: '/feed/:eventId',
      views: {
        'tab-event-detail': {
          templateUrl: 'templates/event-detail.html',
          controller: 'EventDetailCtrl'
        }
      }
    })
    ...
    $urlRouterProvider.otherwise('/tab');
});

控制器.js

.controller('FeedCtrl', ['$scope', 'getLocalStorage', '$ionicModal', '$ionicSideMenuDelegate', function($scope, getLocalStorage, $ionicModal, $ionicSideMenuDelegate) {
  $scope.info = {};
  $scope.events = getLocalStorage.getEvents();
  $scope.clearSelected = function() {
    $scope.events = $scope.events.filter(function(item) {
      return !item.selected;
    });
    getLocalStorage.updateEvents($scope.events);
  };
  $scope.addEvent = function() {
    $scope.events.push($scope.info);
    $scope.modal.hide();
    getLocalStorage.updateEvents($scope.events);
    $scope.info = {};
  };
  $ionicModal.fromTemplateUrl('new-event.html', function(modal) {
    $scope.modal = modal;
  }, {
    scope: $scope,
    animation: 'slide-in-up',
    focusFirstInput: true
  });
}])
.controller('EventDetailCtrl','getLocalStorage', function($scope, getLocalStorage, $stateParams, $ionicSideMenuDelegate) {
  $scope.openMenu = function () {
    $ionicSideMenuDelegate.toggleLeft();
  };    
  var eventId = $stateParams.name;
  $scope.event = getLocalStorage.getEvent(eventId);
})
URL 中的参数

名称与控制器中请求的参数和 tab-feed.html 中的链接不匹配。

应用.js

.state('tabs.event-detail', {
  url: '/feed/:eventId',  //   <-- The parameter is defined as eventId
  views: {
    'tab-event-detail': {
      templateUrl: 'templates/event-detail.html',
      controller: 'EventDetailCtrl'
    }
  }
})

控制器.js

 .controller('EventDetailCtrl','getLocalStorage', function($scope, getLocalStorage, $stateParams, $ionicSideMenuDelegate) {
  $scope.openMenu = function () {
    $ionicSideMenuDelegate.toggleLeft();
  };    
  var eventId = $stateParams.eventId;  // <-- here you request the parameter
  $scope.event = getLocalStorage.getEvent(eventId);
})

最后,您还需要更正 href 属性选项卡源.html

<ion-item class="item item-thumbnail-left" ng-repeat="event in events | orderBy:'name' | searchEvents:search" type="item-text-wrap" href="#/feed/{{event.eventId}}">

当然,您也可以使用名称作为参数,但必须保持一致。