Adam,
I was able to “solve” this. I don’t understand it though. I stumbled across this yesterday when trying to test why the delay exists.
I have several list card items similar to this:
<div class="card">
<!-- A "clickable" header that shows the user name -->
<a id="nameCardHeader" class="item item-icon-left" ng-show="uiSections.showNameHeader" ng-click="manageUiSections('open', 'name')">
<i class="icon ion-ios7-person"></i>
<h2><span class="card-item-header">Name</span>{{ memberDetails.givenName }}</h2>
</a>
<!-- A user data entry form that displays when the header is clicked -->
<div class="item" ng-show="uiSections.showNameForm">
<form name="$parent.nameForm" novalidate="true" ng-submit="submitNameInfo()">
<p>Some form stuff goes here
</form>
</div>
</div>
The first item is a summary of the information in the form. The second item is a form. When the first item is clicked, the first item is no longer shown and the form card item is displayed. That’s all managed by the ng-click="manageUiSections('open', 'name')"
In my controller, I manage what card items should be displayed / open based on the status of filling out all the forms.
$scope.manageUiSections = function(event, formSection) {
switch(event) {
// A specific form section needs to open, all other UI sections should close
case 'open':
if($scope.mmc.action === 'updating' && formSection === 'name') {
return false;
}
closeAllUiSections();
switch(formSection) {
case 'name':
$scope.uiSections.showNameForm = true;
break;
case 'pin':
$scope.uiSections.showPinForm = true;
break;
case 'icon':
$scope.uiSections.showIconForm = true;
break;
}
break;
// A specific form section is being closed. Determine which UI sections should open
case 'close':
// Close everything first.
closeAllUiSections();
// Name header should always be open after a first click
$scope.uiSections.showNameHeader = true;
if($scope.memberDetails.secretPin === ''){
$scope.manageUiSections('open', 'pin');
// Don't allow anything else to open right now.
return;
} else {
$scope.uiSections.showPinHeader = true;
}
if($scope.memberDetails.selectedIcon === '') {
$scope.manageUiSections('open', 'icon');
// Don't allow anything else to open right now.
return;
} else {
$scope.uiSections.showIconHeader = true;
}
break;
}
};
So, if I leave the code just like that, clicking on a “header” card item like in the example will cause the “nameForm” section to open. On Chrome and simulator, it happens instantaneously. On iPhone (4S iOS 6 & 5s IOS 7), it takes 5 to to seconds.
I discovered by accident that if I add ANY code before that switch statement in $scope.manageUiSections, the delay disappears. Any code will work (console.log, var a). So, now I have:
$scope.manageUiSections = function(event, formSection) {
var a;
switch(event) {
...
...
}
};
I have no clue why this works, but it does.
