Just noticed that having an ion-list within a regular template also doesn’t trigger routing to the next view so it doesn’t seem side-menu related but a more general event handling issue. Here’s my index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src='https://cdn.firebase.com/js/client/1.0.11/firebase.js'></script>
<script type='text/javascript'
src='https://cdn.firebase.com/js/simple-login/1.3.2/firebase-simple-login.js'>
</script>
<script src="js/ext/geoFire.js"></script>
<script src="js/ext/angularfire.min.js"></script>
<script src="js/ext/angularGeoFire.min.js"></script>
<script src="js/ext/date.js"></script>
<script src="js/ext/moment.min.js"></script>
<!-- your app's js -->
<script src="js/config.js"></script>
<script src="js/configlocal.js"></script>
<script src="js/customlog.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="starter">
<ion-nav-bar class="bar-positive nav-title-slide-ios7">
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
Here’s my app.js state/router setup:
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['starter.controllers'])
.run(function ($ionicPlatform, $ionicLoading, $ionicPopup) {
$ionicPlatform.ready(function () {
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function ($stateProvider, $urlRouterProvider, $httpProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html"
})
.state('app.login', {
url: "/login",
views: {
'menuContent': {
templateUrl: "templates/login.html"
}
}
})
.state('app.settings', {
url: "/link1",
views: {
'menuContent': {
templateUrl: "templates/link1.html"
}
}
})
.state('app.link2', {
url: "/link2",
views: {
'menuContent': {
templateUrl: "templates/link2.html",
controller: 'Link2Ctrl'
}
}
})
.state('app.link3', {
url: "/link3",
views: {
'menuContent': {
templateUrl: "templates/link3.html"
}
}
})
.state('app.link4', {
url: "/link4",
views: {
'menuContent': {
templateUrl: "templates/link4.html"
}
}
})
.state('app.link5', {
url: "/link5",
views: {
'menuContent': {
templateUrl: "templates/link5.html"
}
}
})
.state('app.link6', {
url: "/link6/{id}",
views: {
'menuContent': {
templateUrl: "templates/link6.html"
}
}
})
.state('app.link7', {
url: "/link7",
views: {
'menuContent': {
templateUrl: "templates/link7.html"
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/login');
});
As an aside, note that I’ve taken out declarations from the app.js for the controllers and moved them into template HTMLs as for some reason bindings for scope variables to input fields weren’t working. Once ng-controller attributes were moved to the template HTML instead of app.js bindings worked. Having them in both places the controllers would initialize twice and is the reason I had them moved.
Just a note as well that thi issue doesn’t exist on the latest Android KitKat when the app is built with ionic build android and run on the phone with ionic run android. It now seems only related to the app built with ionic build ios and run on the actual iOS device or the XCode based simulator, either iOS 6.1 or 7.1.
Another comment is that the side-menu and links DO work without issues in just a regular Safari browser on the iPhone (in this case iPhone 5S with iOS 7.1) when the app is run through there but NOT when it is run as a Cordova (ionic build ios, then start through XCode either on the device or in the simulator) based app.