Ionic：具有选项卡和侧面菜单导航问题的Master Detail？

user3474154 发表于 Dev

用户3474154

我的应用程序使用选项卡，侧面菜单和主细节图案。但是，由于某种原因，我不知道如何使它导航到列表中项目的详细信息页面。我已经尝试了好几天，但我对Ionic和Angular还是很陌生...

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

tab-feed.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>

tabs.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>

app.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');

});

controllers.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中的链接不匹配。

app.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'
    }
  }
})

controller.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);
})

最后，您还需要更正tab-feed.html中的href属性

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。