Binding works on web browser but not on iOS and Android application

ionic-v1
1

Hi,

First of all, i’m new to angularjs and ionic.
Here’s my problem, i’m calling an api (develop in php) on localhost to get informations about the user connected.
Everything works fine, i can make a get request to my api and return a json response etc… So, on my “profile page”, i want to put all the informations about the user, i’m using {{ userInfos.first_name }}, everything work fine when i test in a browser like google chrome, but i want to test on the ios or android application, it doesn’t work and there is nothing like if my controller wasn’t called.

here’s my code :

profile.html

<ion-pane>
  <ion-header-bar class="bar-royal">
    <h1 class="title">Moodress</h1>
  </ion-header-bar>
  <ion-content class="has-header">
    <div ng-controller="ProfileController">
      <ul class="list">
        <li class="item" ng-bind-html="userInfos.username"></li>
        <li class="item">{{ userInfos.first_name }}</li>
        <li class="item">{{ userInfos.last_name }}</li>
        <li class="item">{{ userInfos.email }}</li>
        <li class="item">{{ userInfos.gender }}</li>
      </ul>
    </div>
  </ion-content>
  <ion-footer-bar align-title="left" class="bar-royal">
    <div class="buttons">
      <button class="button">Left Button</button>
    </div>
    <h1 class="title">Title!</h1>
    <div class="buttons" ng-click="doSomething()">
      <button class="button">Right Button</button>
  </div>
  </ion-footer-bar>
</ion-pane>

app.js

var moodress = angular.module('moodress', ['ionic', 'ui.router']);

moodress.config(function($stateProvider, $urlRouterProvider){
    //$urlRouterProvider.otherwhise('/login');
    $stateProvider
        .state('/login', {
            url: '/login',
            templateUrl: 'partials/login.html'
            })

        .state('/profile', {
            url: '/profile',
            controller: 'ProfileController',
            templateUrl: 'partials/profile.html'
        });
    $urlRouterProvider.when('', '/login');

});

moodress.controller('ProfileController', function($scope, profileFactory){
    $scope.userInfos = [];

   profileFactory.async().then(function(d){
       $scope.userInfos = d;
   });
});


moodress.factory('profileFactory', function($http){
    var factory = {
        async: function(){
            var userInfo = $http.get('//0.0.0.0:3000/api/user_by_mail?email=yo@yo.com').then(function (response){
                console.log(response);
                alert(response.data.email);
                return response.data;
            });
            return userInfo;
        }
    };
    return factory;
});


moodress.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.StatusBar) {
      // Set the statusbar to use the default style, tweak this to
      // remove the status bar on iOS or change it to use white instead of dark colors.
      StatusBar.styleDefault();
    }
  });
})

Here some screenshot :
On Google Chrome

On my emulators ios and android

I hope you can help me,
Thank you for your reading,

Answer2312

2

I THINK the problem is with your service. In your controller, you are expecting a promise (as you are using .then). However, your service is not returning a promise.

I’ve had a few little issues similar to this in the past. The desktop is so performant that it “works”. However, slower devices and emulators don’t.

I would try using $q to return an actual prromise.

async: function(){

var deferred = $q.defer();

  $http.get('//0.0.0.0:3000/api/user_by_mail?email=yo@yo.com').then(function (response){
     console.log(response);
    alert(response.data.email);
    deferred.resolve(esponse.data);
 });

  return deferred.promise;
}
3

Thank you for you quick answer!
I change my function like you said me, i now use $q but there is still nothing.
I notice that in my service ‘profileFactory’ the alert(response.data.email); does work on desktop but not on my emulators like if the service wasn’t called. Do you think I’m doing something wrong about this? Maybe should i use factory for this?

Edit : I notice when i use safari on my iphone emulator, it works…

4

It’s really tough to say without being able to see exactly what you are doing.

If you can post a complete CodePen sample, I can take it and put it on my device to see what is up.

5

Hi,

Here the CodePen sample as you asked me!
http://cdpn.io/KiGCJ

I’m still trying to get this things work, but i can’t find any solutions.
I don’t understand what my problem could be…http request no executed? Controller is not called?
Hope you can help me!

Have a good day (:

6

Sorry for the double post.

I think i have found my problem, after many test i saw that my http request doesn’t work.
I have no problem for binding basics data.
I did a little bit of search to see what i have to do, i saw that i have to give my application the permission to access at internet on android, but on ios?? Could be a solution?

7

Hey, I just had this problem as well. The issue is with your request, as you mentioned. Whereas ‘//domain’ works in the browser, it doesn’t seem to work in iOS. You’ll have to specify the full protocol: $http.get(‘http://0.0.0.0:300/api/etc’).