Trouble with updating view via angular/$http/ionic on iOS simulator

ionic-v1
1

Problem: Data brought in by async $http request and rendered by ng-repeat doesn’t show up on iOS simulator if wrapped in ionic css.

I have an $http request getting data:

$http.get('http://xxx.com/api/v1/seasons').success(function(res){
	$scope.seasons = res;
});

If I use ng-repeat on a regular anchor tag like this, iOS simulator will render as expected:

<a ng-href="#" ng-repeat="season in seasons">
    {{season.name}}
</a>

If I use ng-repeat with an Ionic list component, iOS simulator doesn’t render list at all

<list>
  <a class="item" ng-href="#" ng-repeat="season in seasons">
    {{season.name}}
  </a>
</list>

I’m pretty confident the issue is hows mobile safari executes javascript in the angular context but I don’t know if this is ionic specific or not. Has anybody seen/head of this issue or know of a workaround?

EDIT: Found a workaround but I still find it to be an interesting compatibility limitation, posted below

2

Ok I found a workaround but I still think this is an interesting limitation to one or a couple of ionic/angular/phonegap/ios.

Changing the list directive

<list></list>

to the class style implementation seemed to work:

<div class="list></div>

An interesting problem though, anyone have any ideas?

3

That is indeed interesting. I’ve actually never used the <list> directive. Instead, I’ve always used <div class="list">; so, I’ve never seen this in action.

However, can you make sure you are on the newest release? <list> is pre-0.9.25. The new version uses an ion- prefix on all directives. It’d be helpful to know if the newest release has this problem.

See : http://codepen.io/ionic/pen/JsHjf

Actually, I just threw together 2 really rough examples using $http. I didn’t feel like fighting the x-domain issues, so I added the list data to the scope after the $http failure.

Using <ion-list> : http://codepen.io/calendee/pen/fKCnq

Using <a class="item"> : http://codepen.io/calendee/pen/jIJcm

Both work just fine.

1 Like
4

Yea I got the <list> directive off the docs and forgot about the ion- prefix announcement. <ion-list> does in fact work, thanks! Might be confusing for people that have missed that announcement.