Ion-side-menu, navigation doesn't work in iOS 6.1, 7.1 (both Simulator and built device app affected)..works in iOS Safari and Android


#1

Hi guys,
I’ve started using the ionic framework to build a POC for an app I’m working on. I’m enjoying working with the framework and everything works as expected in the browser (Chrome). I’ve used the side menu template to start the project and the menu.html has 4 ion-item links in it that map to URLs in the app.js router. However, on iOS 6.1 and 7.1 simulator run through XCode (after “ionic build ios” to refresh the platforms resources) the app starts up fine but the links in the menu.html don’t trigger a transition to a new view and the side menu doesn’t close. Menu.html is as follows:

<ion-side-menus>
    <ion-pane ion-side-menu-content>
        <ion-nav-bar class="bar-stable nav-title-slide-ios7"></ion-nav-bar>
        <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
    </ion-pane>

    <ion-side-menu side="left" ng-controller="AppCtrl">
        <header class="bar bar-header bar-stable">
            <h1 class="title">Title</h1>
        </header>
        <ion-content class="has-header">
            <ion-list>
                <ion-item nav-clear menu-close href="#/app/link1">
                    Link 1
                </ion-item>
                <ion-item nav-clear menu-close href="#/app/link2">
                    Link 2
                </ion-item>
                <ion-item nav-clear menu-close href="#/app/link3">
                    Link 3
                </ion-item>
                <ion-item nav-clear menu-close href="#/app/link4">
                    Link 4
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

Any ideas? Thank you in advance.

EDIT: I’m using the latest v1.0.0-beta.1 “actinium” · 2014-03-25


Side menu based app broken in iOS 7 (and some Android), not iOS 8 or browser
#2

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.


#3

You really shouldn’t have to make all those adjustments. It should “just work”. See GIF below.

This was after doing :

> ionic start forum3230 sidemenu
> cd forum3230/
> ionic platform add ios
> ionic build ios

Then opening project in Xcode to run in different simulators
```<img src="/uploads/default/559/c598d14a1b6a42e8.gif" width="288" height="499"> 

Let me ask a few questions to narrow this down:

 - What Mac OS X version
 - Node version
 - When did you install ionic?  
 - Are you following exactly as defined in [Getting Started](http://ionicframework.com/getting-started/)?


#4

Thanks for your reply, really appreciate it. I started the project last week so the version is the latest 1.0 beta that you’ve had. I’ve just tried creating a sample project that you’ve done from scratch and it works in the simulator without issues. I’m not sure why the project I’ve created might not work.

When you say you shouldn’t need as many changes to make it work, what exactly did you have in mind? The changes I’ve done were to troubleshoot this issue as well as additional JS that provides the app with functionality. I’m trying to go through and compare the sample project with mine to possibly track it down. Now that the sample project works it might be easier to track down but if you’ve got any ideas where to look that’d be great.

I’ve followed the getting started guide to create the project when I initially created it. Node version is v0.10.26. Mac OSX 10.9.2 (current).

Thank you and keep up the great work guys!


#5

Just to update you guys. For whatever reason removing the external reference to the firebase.js solves the issue for iOS entirely. I’ve moved this js file so its locally managed and the issue is gone :slight_smile: of course it’d be something that simple!

This was not an ionic framework issue.