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

Question

My app uses tabs, a side menu and a master detail pattern. But, for some reason, I can't figure out how to make it navigate to the detail page of an item in the list. I've been trying to figure it out for days but I'm pretty new to Ionic and Angular...

If anybody could tell me what's wrong, I would really appreciate it.

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

Answer 1

Your name of parameter in the URL doesn't match the requested parameter in the controller and the link in 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);
})

And last you also need to correct the href-attribute in tab-feed.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}}">

Of course, you also can use the name as parameter, but you have to be consistent.