My current javascript framework for my PhoneGap app is the Ionic Framework.
I have a specific item on one of my pages that I want to make expandable and collapsible by clicking an anchor on the page. Here is what the code looks like:
In the HTML file:
<a ng-click="collapse(3)">Expand/Collapse test</a>
<a ng-show="children[3]">child</a>
In the controller:
$scope.collapse = function(number) {
if ( ($scope.showChild[number] = false) || ($scope.showChild[number] = null) )
$scope.showChild[number] = true;
else
$scope.showChild[number] = false;
};
When I test it in my mobile Safari browser, everything works as expected. Clicking on the "Expand/Collapse test" anchor shows and hides the "child" anchor accordingly. However, when I build the app using Adobe Build and load it on my phone, the functionality becomes inconsistent - the anchor doesn't show or hide properly when clicked unless I scroll around the page before each click. If I keep the page static without scrolling, the "child" anchor remains unaffected until I click elsewhere on the screen.
Any suggestions or ideas on how to resolve this issue? I am hoping to avoid adding jQuery onclick listeners if possible.
Thank you!