Ionic/Angular：使用主细节模式，细节页面没有显示？

Question

我的应用使用选项卡、侧边菜单和主详细信息模式。但是，由于某种原因，当我尝试导航到列表中某个项目的详细信息页面时，什么也没有出现。不知道是不是路由错了还是怎么的。

如果有人可以帮助我，我将不胜感激！这快把我逼疯了！

谢谢！

app.js

.config(function($stateProvider, $urlRouterProvider) {
  $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/:name',
      templateUrl: 'templates/event-detail.html',
      controller: 'EventDetailCtrl'
    })

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.name}}">
          <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>

EventDetailsController

.controller('EventDetailCtrl', ['getLocalStorage', function($scope, getLocalStorage, $stateParams, $ionicSideMenuDelegate) {

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

  var name = $stateParams.name;
  $scope.event = getLocalStorage.getEvent(name);
}])

获取本地存储服务

.factory('getLocalStorage', function () {

    var eventList = [];

    return {
            list: eventList,

        updateEvents: function (eventsArr) {
            if (window.localStorage && eventsArr) {
                localStorage.setItem("events", angular.toJson(eventsArr));
            }
            //update the cached version
            eventList = eventsArr;
        },

        getEvents: function () {
            eventList = angular.fromJson( localStorage.getItem("events") );
            return eventList ? eventList : [];
        },

        getEvent: function(name){
            for(i=0;i<eventList.length;i++){
                if(eventList[i].name == name){
                    return eventList[i];
                }
            }
          }
    };
})

Answer 1

您可以尝试以下方法吗：

1) 将abstract: true 添加到您的tabs 状态：

.state('tabs', {
    url: '/tab',
    controller: 'TabsCtrl',
    abstract: true,
    templateUrl: 'templates/tabs.html'
})

2) 在您的EventDetailsCtrl 中，如果您正在考虑缩小，请按顺序在function... 之前添加所有注入参数，如下所示：

.controller('EventDetailCtrl', ['$scope', 'getLocalStorage', '$stateParams', '$ionicSideMenuDelegate', function($scope, getLocalStorage, $stateParams, $ionicSideMenuDelegate) {

如果以上方法没有帮助，请发布您的tabs.html 代码。