Ion-item does not work on iOS 7 :(

I’m using the following code to output a contact list on the iPad running iOS 7.1

<ion-content>
	<ion-list can-delete="true" option-buttons="itemButtons">
		<ion-item ng-href="#/contacts/people/{{ person.ident }}" ng-repeat="person in people" item="person">
			{{ person.firstname }} {{ person.lastname }} &nbsp;
		</ion-item>
	</ion-list>

	<ion-infinite-scroll on-infinite="load()" distance="10%" ng-if="scroll.hasMore"></ion-infinite-scroll>
</ion-content>

Unfortunately the ion-items are not clickable in the iPad Simulator and also on the iPad itself. But whenever I click on an item in a Browser (tested in Chrome and Safari) it works - even when I open up Safari on the iPad it works!

Any ideas how this does not behave correctly?

I just used the “Getting Started” to build out a fresh “ionic start myApp sidemenu” sample.

Then, I pasted most of your code into the list:

<ion-view title="Playlists">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">

  <ion-list can-delete="true" option-buttons="itemButtons">
    <ion-item href="#/app/playlists/{{playlist.id}}" ng-repeat="playlist in playlists" item="playlist">
      {{playlist.title}}
    </ion-item>
  </ion-list>

  </ion-content>
</ion-view>

It all works fine in simulator for me.

Can you post a complete sample of your code? If so, I can put it in my simulator to see if I can figure it out.

Hi Calendee

Thanks for your help. I’ve just reworked the whole way of navigation since I’ve used “ui-view” before and assumed this would cause issues.

Animations are done now sucessfully in the browser but for some reason the ion-item is still not working correctly in the simulator.

Here’s my code:

/index.html

<body ng-app="biz"><ion-nav-view></ion-nav-view></body>

/templates/app.html (loaded inside ion-nav-view of index.html)

<ion-nav-bar class="bar bar-subheader bar-dark nav-bar"></ion-nav-bar>
<ion-nav-view name="content" animation="slide-left-right-ios7"></ion-nav-view>

/js/states/contacts/people.coffee (defines template of “content”)

module.exports = 
  name: 'app.contacts.people'
  parent: 'app.contacts'
  url: '/people'
  views:
    'content@app':
       templateUrl: 'contacts/people.html'
       controller: 'peopleController'

/templates/contacts/people.html (outputs the non-working list)

<ion-view>
  <ion-content class="has-header has-subheader">
    <ion-nav-buttons side="left">
      <a ui-sref="app.dashboard" class="button button-clear"><i class="icon ion-home"></i></a>
      <a ui-sref="app.contacts" class="button button-clear" translate="contacts"></a>
      <a ui-sref="app.contacts.people" class="button button-clear" translate="contacts.people"></a>
    </ion-nav-buttons>
    <ion-nav-buttons side="right">
      <a ui-sref="app.contacts.people.add" class="button button-clear"><i class="icon ion-plus-round"></i></a>
    </ion-nav-buttons>
    <ion-list can-swipe="true" option-buttons="itemButtons">
      <ion-item ng-href="#/contacts/people/{{ person.ident }}" ng-repeat="person in people" item="person">
			{{ person.firstname }} {{ person.lastname }} &nbsp;</ion-item>
    </ion-list>

    <ion-infinite-scroll on-infinite="load()" distance="10%" ng-if="scroll.hasMore"></ion-infinite-scroll>
  </ion-content>
</ion-view>

/js/controllers/people.coffee (loads data into the list)

angular.module('biz').controller 'peopleController',
class peopleController
    @$inject:['personService','$filter','$scope','$state','$log']
    constructor: (personService,$filter,$scope,$state,$log) ->
        $log.debug('peopleController::initialize', 'activated in state: ' + $state.current.name)

        scope.people = []
        scope.itemButtons = [
            {
                text: $filter('translate')('delete')
                type: 'button-assertive'
                onTap: (item) ->
                    for person,i in scope.people
                        if person.ident is item.ident
                            scope.people.splice(i,1)
                            break
                    personService.deleteByPk(item.ident)
            }
        ]

        scope.scroll = 
            hasMore: true
            offset: 0
            limit: 50

        scope.load = () ->
            personService.load({
                offset:scope.scroll.offset,
                limit:scope.scroll.limit

            }).then (people) ->
                scope.people.push.apply scope.people,people
                scope.scroll.offset = scope.people.length
                scope.scroll.hasMore = people.length is scope.scroll.limit

                scope.$broadcast 'scroll.infiniteScrollComplete'

        scope.load()

Seems to be a general problem.
I’ve just worked on another part of the app and noticed I’m not able to link to another page whenever the link is inside of the ion-content.

The ion-nav-buttons are working fine, but when I place the following link into the ion-content, nothing happens in the iPad Simulator:

<a ui-sref="app.dashboard" class="button button-clear" translate="documents">
  24.02.2013
</a>

As noticed before the links are working fine in all regular browsers :frowning:
Any Idea how this could be solved?

As this is a huge pitfall which prevents me in developing any further :’(

Ok, after hours and hours I hope I was able to track the issue down.
Whenever I add a surrounding ion-content the list stops working in the simulator and on the real iPad - unfortunately I have no clue why.

So the following snippet does NOT work:

<ion-content class="has-subheader">
    <ion-list can-swipe="true" option-buttons="itemButtons">
        <ion-item ng-repeat="person in people" ng-href="#/contacts/people/{{ person.ident }}" >
            {{ person.firstname }} {{ person.lastname }}
        </ion-item>
    </ion-list>
</ion-content>

And the following snippet works:

<ion-list can-swipe="true" option-buttons="itemButtons" class="has-subheader">
    <ion-item ng-repeat="person in people" ng-href="#/contacts/people/{{ person.ident }}" >
        {{ person.firstname }} {{ person.lastname }}
    </ion-item>
</ion-list>

This circumstance prevents me from using ion-infinite-scroll etc. since these seem only to work from inside a ion-content :frowning:

Any idea how to solve this issue?

I apologize for taking so long to get back to you. I’ve been sick for many days now.

I have to think the problem is specific to something in your code. Again, I’m running the Getting Started “side menu” example with no problem. It has ion-list inside ion-content.

I tried going through your code. I didn’t notice anything that seemed wrong; however, I have no CoffeeScript experience.

Can you try starting from the “Getting Started” example and slowly adding in your custom code to see when/if it starts to fail?

UPDATE : Also note the the NIGHTLY (not sure what you are using) no longer supports the itemOptions array. So, you may want to check that out.

http://ionicframework.com/docs/nightly/api/directive/ionOptionButton/

Dear Calendee

Thanks for getting back to me. For some reason it seems any anchor tag which links on another page is not working from within ion-context in my case.

Unfortunately I have no clue why :frowning:
I’m using the 1.0.0-beta.1 installed with bower.

As I’ve ran the example you’ve provided me in the simulator and this one works fine on my end too it has to be something which is not correct from within my code.

Please find the generated output html of a page which is causing the issue - hoping you’re able to give me a hint what is wrong here?

    <body ng-app="biz" class="grade-a platform-ready">
    <ion-nav-view>
        <nav class="bar bar-header bar-light row">
            <div class="col col-10 text-center">
                <a href="#/dashboard" class="button button-clear">BIZ</a>
            </div>

            <div class="item-input-inset col col-33">
                <label class="item-input-wrapper">
                    <i class="icon ion-ios7-search placeholder-icon"></i>
                    <input type="search" placeholder="Suchen...">
                </label>
            </div>

            <div class="col text-right">
                <a href="#/contacts/people" class="button button-clear">Personen</a>
                <a href="#/contacts/companies" class="button button-clear">Firmen</a>
                <a href="" class="button button-clear"><i class="icon ion-ios7-star-outline"></i></a>
            </div>
        </nav>

        <ion-nav-bar class="bar-subheader bar-dark bar bar-header nav-bar disable-user-behavior">
            <div class="buttons left-buttons">
                <div class="">
                    <a href="#/dashboard" class="button button-clear"><i class="icon ion-home"></i></a>
                    <a href="#/documents" class="button button-clear" translate="documents">Dokumente</a>
                </div>
            </div>
            <h1 ng-bind-html="title" class="title ng-binding" style="left: 1097px; right: 1097px;"></h1>
            <div class="buttons right-buttons"></div>
        </ion-nav-bar>

        <ion-nav-view name="content" animation="slide-left-right-ios7" class="">
            <ion-view class="pane" style="">
                <ion-nav-buttons side="left" style="display: none;"></ion-nav-buttons>
    
                <ion-content class="has-subheader scroll-content  has-header">
                    <div class="scroll" style="-webkit-transform: translate3d(0px, 0px, 0px);">
                        <div class="list container">
                            <div ng-repeat="document in documents" class="card">
                                <a ng-href="#/documents/00ab6120-4629-4c1a-8390-f321848c6725" class="item item-image" href="#/documents/00ab6120-4629-4c1a-8390-f321848c6725">
                                    <img ng-src="http://localhost/mnk_biz_api/index.cfm/documents/00ab6120-4629-4c1a-8390-f321848c6725/preview?size=180x260&amp;page=1" src="http://localhost/mnk_biz_api/index.cfm/documents/00ab6120-4629-4c1a-8390-f321848c6725/preview?size=180x260&amp;page=1">
                                </a>
                                <div class="item item-input">
                                    <input type="text" class="no-flex text-bold text-center ng-pristine ng-valid" ng-model="document.name" ng-change="save(document)">
                                </div>
                                <div class="item item-meta text-center ng-binding">
                                    02.03.2013
                                </div>
                            </div>
                            ...
                        </div>
                    </div>
                    <div class="scroll-bar scroll-bar-v">
                        <div class="scroll-bar-indicator scroll-bar-fade-out" style="height: 167px; -webkit-transform: translate3d(0px, 0px, 0px) scaleY(1);"></div>
                    </div>
                </ion-content>
            </ion-view>
        </ion-nav-view>
    </ion-nav-view>
</body>

Thanks for the hint of the nightly build!!
I’ve just give it a try by installing it via bower:

bower install driftyco/ionic-bower#master

And this has solved the navigation issue!! :slight_smile:

Wow. Glad to hear it. I was at wits end.

I’m having the same problem. Removed <ion-content> but still have had no luck with the navigation using an href="#/app/path" attribute. Any other ideas?

I figured this out within my app. We were loading the Google Maps API in our index file. As soon as we removed this and ran a build on the app, the items worked again. Adding Googs API back in and rebuilding, killed the menu items. Hope this helps.

I also have this problem, and I also use google maps api in index.html.
However, even though I remove google api and re-build my app, it still doesn’t work:(

@guoqiao Are you loading any other external resources? I removed all external references, loaded everything locally, and this seemed to work. I also figured out that you need to load the Google Maps js before the cordova reference:

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<script src='https://maps.googleapis.com/maps/api/js?sensor=true'></script>
  
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

I remove all external resources, and it still doesn’t work.
then, I use the nightly build of ionic, it works.
So I think this is a bug, and has been fixed in the dev version.

Same issue, fixed with nightly build