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 }} </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()