如何在 Ionic with Backend 中实现 Master Detail 模式？

Question

我正在使用 Backand 进行数据存储，但无法显示列表中项目的详细信息。它导航到详细信息页面，但不显示任何数据。我知道如何在使用本地存储时实现主细节模式，但在使用 Backand 时我无法弄清楚。如果有人可以帮助我，那就太好了！

谢谢！

controllers.js

angular.module('starter.controllers', [])

.controller('TabsCtrl', function($scope, $ionicSideMenuDelegate) {
  $scope.openMenu = function () {
    $ionicSideMenuDelegate.toggleLeft();
  };
})

.controller('FeedCtrl', ['$scope', '$ionicModal', '$ionicSideMenuDelegate', 'EventService', function($scope, $ionicModal, $ionicSideMenuDelegate, EventService) {

  $scope.openMenu = function () {
    $ionicSideMenuDelegate.toggleLeft();
  };

  $scope.events = [];
  $scope.input = {};

  function getAllEvents() {
    EventService.getEvents()
    .then(function (result) {
      $scope.events = result.data.data;
    });
  }

  $scope.addEvent = function() {
    EventService.addEvent($scope.input)
    .then(function(result) {
      $scope.input = {};
      // Reload our todos, not super cool
      getAllEvents();
    });
  }

  $scope.deleteEvent = function(id) {
    EventService.deleteEvent(id)
    .then(function (result) {
      // Reload our todos, not super cool
      getAllEvents();
    });
  }

  getAllEvents();

  $ionicModal.fromTemplateUrl('new-event.html', function(modal) {
    $scope.modal = modal;
  }, {
    scope: $scope,
    animation: 'slide-in-up',
    focusFirstInput: true
  });

}])

.controller('EventDetailCtrl', ['$scope', '$stateParams', '$ionicSideMenuDelegate', 'EventService', function($scope, $stateParams, $ionicSideMenuDelegate, EventService) { 
  $scope.openMenu = function () {
    $ionicSideMenuDelegate.toggleLeft();
  };    

  var id = $stateParams.id;
  $scope.event = EventService.getEvent(id);
}]);

app.js

angular.module('starter', ['ionic', 'ngCordova', 'backand', 'starter.controllers', 'starter.services'])

.run(function($ionicPlatform, $rootScope, $state, LoginService, Backand) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function(BackandProvider, $stateProvider, $urlRouterProvider, $httpProvider) {

  $stateProvider

    .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('event-detail', {
      url: '/event-detail/:id',
      templateUrl: 'templates/event-detail.html',
      controller: 'EventDetailCtrl'
    });

  // if none of the above states are matched, use this as the fallback

    $urlRouterProvider.otherwise('/tab');
    $httpProvider.interceptors.push('APIInterceptor');  
})

tab-feed.html

<ion-view view-title="Feed" class="tab-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="#/event-detail/{{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>

        <!--delete button just for testing purposes-->
        <ion-option-button class="button-assertive" ng-click="deleteEvent(event.id)">
          Delete
        </ion-option-button>
      </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>

事件-detail.html

<ion-view view-title="{{event.name}}" class="event-detail">

  <ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
  </ion-nav-buttons> 
  <ion-content>
  <div class="row no-padding">
    <div class="col no-padding">
        <img ng-src="http://placehold.it/350x200">
    </div>
  </div>
  <div class="row no-padding">
    <div class="col no-padding">
      <button class="button button-full button-assertive" ng-click="checkin()">Check-In</button>
    </div>  
  </div>
  <div class="row">
    <div class="col">
      <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>
      <p>{{event.info}}</p>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <h3>Comments</h2>
    </div>
  </div>
  </ion-content>
</ion-view>

Answer 1

您正在使用 promise 在主控制器中设置数据，但没有在详细控制器中设置数据

变化：

$scope.event = EventService.getEvent(id);

到

EventService.getEvent(id).then(function(response){
   $scope.event = response.data;
});

这假设 EventService.getEvent() 发出 $http 数据请求

如何在 Ionic with Backend 中实现 Master Detail 模式？

How to implement the Master Detail Pattern in Ionic with Backand?

angularjs

ionic-framework

backand