Hello,
first of all thank you very much for this awesome framework. I developed a app for android and everything works as excepted. So i decided to also release a iOS version. But there are some problems with my sidemenu navigation and href.
The problems only occur on a device. Ionic serve and also emulation working perfect.
There are a lot of similar topics in this forum, but nothing helped for me.
When i click a link (href) in the sidemenu, there is a delay where the view is refreshed and after this delay of 300ms the navigation closes. After this it seemed href is firing twice and a new view (most of the time it is the last href i clicked) shows up.
The same problem shows up when i click the back button in the header bar.
Here is my code.
**
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="css/ionic.app.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="js/ng-cordova.min.js"></script>
<script src="lib/json.date-extensions/json.date-extensions.min.js"></script>
<!-- your app's js -->
<script type="text/javascript" src="js/OneSignal.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<script>
JSON.useDateParser();
</script>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
app.js
angular.module('starter', ['ionic', 'starter.controllers', 'ngCordova'])
.config(function ($ionicConfigProvider) {
$ionicConfigProvider.views.maxCache(0);
})
.config(function($httpProvider) {
$httpProvider.interceptors.push(function($rootScope) {
return {
request: function(config) {
$rootScope.$broadcast('loading:show')
return config
},
response: function(response) {
$rootScope.$broadcast('loading:hide')
return response
}
}
})
})
.run(function($rootScope, $ionicLoading) {
$rootScope.$on('loading:show', function() {
$ionicLoading.show({template: '<p><ion-spinner icon="ripple" class="spinner-light"></ion-spinner></p><p>Ruhig Blut, es lädt!</p>'})
})
$rootScope.$on('loading:hide', function() {
$ionicLoading.hide()
})
})
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
}
$timeout(function() {
navigator.splashscreen.hide();
}, 500);
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.events', {
url: '/events',
views: {
'menuContent': {
templateUrl: 'templates/events.html',
controller: 'EventsCtrl'
}
}
})
.state('app.sport', {
url: '/sport',
views: {
'menuContent': {
templateUrl: 'templates/sport.html',
controller: 'SportCtrl'
}
}
})
.state('app.food', {
url: '/food',
views: {
'menuContent': {
templateUrl: 'templates/food.html',
controller: 'FoodCtrl'
}
}
})
.state('app.posts', {
url: '/posts',
views: {
'menuContent': {
templateUrl: 'templates/posts.html',
controller: 'PostsCtrl'
}
}
})
.state('app.kontakt', {
url:'/kontakt',
views: {
'menuContent': {
templateUrl: 'templates/kontakt.html',
controller: 'KontaktCtrl'
}
}
})
.state('app.fashion', {
url: '/fashion',
views: {
'menuContent': {
templateUrl: 'templates/fashion.html',
controller: 'FashionCtrl'
}
}
})
.state('app.taxi', {
url: '/taxi',
views: {
'menuContent': {
templateUrl: 'templates/taxi.html',
controller: 'TaxiCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/posts');
});
controller.js (only 2 controllers, cause they all look the same)
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout, $ionicPopup, $http) {
// With the new view caching in Ionic, Controllers are only called
// when they are recreated or on app start, instead of every page change.
// To listen for when this page is active (for example, to refresh data),
// listen for the $ionicView.enter event:
//$scope.$on('$ionicView.enter', function(e) {
//});
$scope.rotate = function() {
var logo = document.getElementById("menulogo");
logo.style.webkitTransform = "rotate(360deg)";
}
$scope.showAlert = function() {
var alertPopup = $ionicPopup.alert({
title: 'Info!',
template: '<div style="text-align:center;"><p><big>© Tobias Meier </big></p> <p> <a class="button button-block button-outline button-calm icon-left ion-ios-email-outline" ng-href="mailto: tobi.meier89@gmail.com">Mail uns!</a><a class="button button-block button-outline button-balanced icon-left ion-ios-telephone-outline" ng-href="tel: 096211234567">Ruf uns an!</a></p></div>'
});
alertPopup.then(function(res) {
console.log('Mercü for Infolookilooki');
});
};
// Form data for the login modal
$scope.loginData = {};
// Create the login modal that we will use later
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
// Triggered in the login modal to close it
$scope.closeLogin = function() {
$scope.modal.hide();
};
// Open the login modal
$scope.login = function() {
$scope.modal.show();
};
// Perform the login action when the user submits the login form
$scope.doLogin = function() {
console.log('Doing login', $scope.loginData);
// Simulate a login delay. Remove this and replace with your login
// code if using a login system
$timeout(function() {
$scope.closeLogin();
}, 1000);
};
})
.controller('EventsCtrl', function($scope, $http) {
var postsApi = 'http://stadtrausch.com/json/posts.json';
// This should go in a service so we can reuse it
$http.get( postsApi ).
success(function(data) {
$scope.events = data;
$scope.id = data.id;
console.log( data );
}).
error(function(data) {
console.log( 'JSON Datei funzt net' );
});
$scope.doRefresh = function() {
var refreshbutton = document.getElementById("refreshbutton");
$http.get( postsApi ).
success(function(data) {
$scope.events = data;
$scope.id = data.id;
refreshbutton.style.webkitTransform = "rotate(360deg)";
})
.finally(function() {
// Stop the ion-refresher from spinning
})
};
$scope.showbee = function(id) {
var e = document.getElementById(id);
var cf = document.getElementById(id+"post-clock-color");
if(e.style.display == 'block'){
e.style.display = 'none';
cf.style.color = '#4C8AE5';
cf.style.webkitTransform = "scale(1)";
}else{
e.style.display = 'block';
cf.style.color = '#0A417E';
cf.style.webkitTransform = "scale(1.2)";
}
}
})
menu.html
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stadtrausch">
<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" id="sidemenu">
<ion-content>
<img id="menulogo" ng-src="img/icon.png" width="90px" height="90px" />
<ion-list>
<ion-item menu-close id="menuitem" href="#/app/posts">
<i id="menu-icon" class="icon ion-ios-arrow-right"></i>
STADTRAUSCH
</ion-item>
<ion-item menu-close id="menuitem" class="item item-icon-left" href="#/app/events">
<i id="menu-icon" class="icon ion-ios-arrow-right"></i>
EVENTS
</ion-item>
<ion-item menu-close id="menuitem" class="item item-icon-left" href="#/app/sport">
<i id="menu-icon" class="icon ion-ios-arrow-right"></i>
SPORT
</ion-item>
<ion-item menu-close id="menuitem" class="item item-icon-left" href="#/app/food">
<i id="menu-icon" class="icon ion-ios-arrow-right"></i>
FOOD
</ion-item>
<ion-item menu-close id="menuitem" class="item item-icon-left" href="#/app/fashion">
<i id="menu-icon" class="icon ion-ios-arrow-right"></i>
FASHION
</ion-item>
<ion-item menu-close id="menuitem" class="item item-icon-left" href="#/app/taxi">
<i id="menu-icon" class="icon ion-ios-arrow-right"></i>
TAXIS
</ion-item>
<ion-item menu-close id="menuitem" ng-click="showAlert()">
<i id="menu-icon" style="font-family: 'Raleway', sans-serif;" class="icon ion-ios-arrow-right"></i>
Info
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
So as i said, this only happens on every iOS device… Android is working perfect and also ionic serve looks good.
Sorry for my bad english and thanks for your help 
