如何在 Ionic 中使用后端实现主细节模式？

Posted 2023-03-29

【中文标题】如何在 Ionic 中使用后端实现主细节模式？

【英文标题】：How to implement the Master Detail Pattern in Ionic with Backand?

【发布时间】：2016-03-07 14:37:03

【问题描述】：

我正在使用 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>

事件详细信息.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>

【参考方案1】：

您正在使用 Promise 在主控制器中设置数据，而不是在详细控制器中设置数据

变化：

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

到

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

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

【讨论】：

是的，这就是问题所在。非常感谢！