使用$ stateProvider和ion-side-menu导航无法在离子框架中工作

Question

我使用离子CLI创建了一个应用程序。

• 离子启动myApp sidemenu
• 离子平台添加ios
• ionic build ios
• 离子模拟ios

然后我继续修改app.js，如下所示。

angular.module('starter', ['ionic', 'starter.controllers'])
.run(function ($ionicPlatform) {
  $ionicPlatform.ready(function () {
    if (window.cordova && 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 ($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('app', {
    url: '/app', 
    abstract: true, 
    templateUrl: 'templates/menu.html', 
    controller: 'AppCtrl'
  })
  .state('app.register', {
    url: '/register',
    views: {
      'menuContent': {
        templateUrl: 'templates/register.html',
        controller: 'RegisterCtrl'
      }
    }
  })
  .state('app.snap', {
    url: '/snap',
    views: {
      'menuContent': {
        templateUrl: 'templates/snap.html',
        controller: 'SnapCtrl'
      }
    }
  })
  .state('app.search', {
    url: '/search', 
    views: {
      'menuContent': {
        templateUrl: 'templates/search.html',
        controller: 'SearchCtrl'
      }
    }
  })
  .state('app.browse', {
    url: '/browse', 
    views: {
      'menuContent': {
        templateUrl: 'templates/browse.html',
        controller: 'BrowseCtrl'
      }
    }
  });
  $urlRouterProvider.otherwise('/app/snap');
});

我已将controller.js修改为如下所示。

angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
  $scope.loginData = {};
  $ionicModal
    .fromTemplateUrl('templates/login.html', { scope: $scope })
    .then(function(modal) { $scope.modal = modal; });
  $scope.closeLogin = function() {
    $scope.modal.hide();
  };
  $scope.login = function() {
    $scope.modal.show();
  };
  $scope.doLogin = function() {
    console.log('Doing login', $scope.loginData);
    $timeout(function() {
      $scope.closeLogin();
    }, 1000);
  };
})
.controller('RegisterCtrl', function($scope) {
  //TODO
})
.controller('SnapCtrl', function($scope, Camera) {
  //TODO
})
.controller('SearchCtrl', function($scope) {
 //TODO
})
.controller('BrowseCtrl', function($scope) {
 //TODO
});

services.js修改如下（主要取自http://learn.ionicframework.com/formulas/cordova-camera/）。

angular.module('starter.services', [])
.factory('Camera', ['$q', function($q) {
  return {
    getPicture: function(options) {
      var q = $q.defer();
      navigator.camera.getPicture(function(result) {
        q.resolve(result);
      }, function(err) {
        q.reject(err);
      }, options);
      return q.promoise;
    }
  }
}]);

我的menu.html修改如下。

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button></ion-nav-back-button>
      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">MyMenu</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close ng-click="login()">
          <i class="icon ion-person"></i> Login
        </ion-item>
        <ion-item menu-close href="#/app/register">
          <i class="icon ion-person-add"></i> Register
        </ion-item>
        <ion-item menu-close href="#/app/snap">
          <i class="icon ion-camera"></i> Snap
        </ion-item>
        <ion-item menu-close href="#/app/search">
          <i class="icon ion-search"></i> Search
        </ion-item>
        <ion-item menu-close href="#/app/browse">
          <i class="icon ion-android-document"></i> Browse
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

当我在iOS模拟器中运行它时，总是点击登录链接菜单项工作（模态显示）。但是，单击任何其他菜单项仅适用于单击的第一个菜单项。例如，如果我单击注册，则显示注册页面，但是然后单击任何其他菜单项不起作用（注册页面继续显示）。此行为还显示在Android模拟器（ionic emulate android）和浏览器（ionic serve）上。

关于我在这里做错了什么的想法？