2016-08-28 7 views
0

私は非常に簡単なアプリケーションを開発しています。ちょうどAngularとIonicに少し慣れているだけでなく、仕事中の休憩時間、私はちょっと困っている問題にぶつかってきました。これはおそらく非常に単純な修正ですが、私はむしろ何が起こっているのか把握しようとしています。State not persisting - AngularJS IonicサービスJSONファイルからデータを取得して忘れてしまいました。

コンテキスト
私がログイン画面、登録画面とその上のアクションへの呼び出しのカップルと着陸画面からなる、シンプルな3ページ(ATM)アプリを持っています。アイデアは、ユーザデータ(名前、IDなど)はサービス(この場合はuser_svc)を使用して永続化され、後でFirebaseからの特定のJSONからフェッチされるユーザ固有のものを表示するために使用できます。バックと。

問題
は私がいる問題は、データが何らかの理由でサービスのすべての機能が利用できるようには見えないということです。私はそれが両方のユーザーオブジェクトをログに記録するところ私はオブジェクトを移入していますし、どこ私はそれにアクセスしようとしていますと、以下の出力を取得しています:

 
### IN THE POPULATOR ### 
--- SETTER --- 
FETCHED USER: 
ID:  ojohn1 
FORENAME: Olly 
SURNAME: John 


### IN THE ACCESSOR ### 
--- GETTER --- 
FETCHED USER: 
ID:  undefined 
FORENAME: undefined 
SURNAME: undefined 

サービスuser_svcのコードが

を下回っています

angular.module('app') 
 
.service('user_svc', function($http) { 
 
    return { 
 
     user: {}, 
 
     setUser: function(userID) { 
 
      $http.get('data/users.json').then(
 
       function(response) { 
 
        this.user = response.data.users[userID]; 
 
        console.log(
 
         '--- SETTER ---' + 
 
         '\nFETCHED USER:' + 
 
         '\nID:  ' + this.user.id  + 
 
         '\nFORENAME: ' + this.user.forename + 
 
         '\nSURNAME: ' + this.user.surname 
 
        ); 
 
       }, 
 
       function(response) { 
 
        console.log('File read failed'); 
 
       } 
 
      ) 
 
     }, 
 
     getUser: function() { 
 
      console.log(
 
       '--- GETTER ---' + 
 
       '\nFETCHED USER:' + 
 
       '\nID:  ' + this.user.id  + 
 
       '\nFORENAME: ' + this.user.forename + 
 
       '\nSURNAME: ' + this.user.surname 
 
      ); 
 
      return this.user; 
 
     } 
 
    } 
 
})

ユーザのログインが確認された後 SETUSER関数が呼び出され

、およびFE私は現時点ではローカルに保持しているJSONファイルから情報を読み込みます。 ユーザーのオブジェクトが移入されました。このオブジェクトは、そのオブジェクトをサービスの残りの機能にアクセスできるようになりました。これはサービスの要点です。悲しいことに、これはそうではないようですし、誰もがなぜこれが起こっているに助言することができれば、それははるかに

+0

あなたの関数スコープをチェックしてください。 'this'はあなたが対象とする' this'を参照していません。 – topheman

+0

おそらく私は愚かですが、あなたは少し精巧にできますか? –

答えて

1

angular.module('app') 
 
.service('user_svc', function($http) { 
 
    return { 
 
     user: {}, 
 
     setUser: function(userID) { 
 
      var that = this;// assign this to that 
 
      $http.get('data/users.json').then(
 
       function(response) { 
 
        // here, this refers to window 
 
        // that refers to the this of setUser 
 
        that.user = response.data.users[userID]; 
 
        console.log(
 
         '--- SETTER ---' + 
 
         '\nFETCHED USER:' + 
 
         '\nID:  ' + that.user.id  + 
 
         '\nFORENAME: ' + that.user.forename + 
 
         '\nSURNAME: ' + that.user.surname 
 
        ); 
 
       }, 
 
       function(response) { 
 
        console.log('File read failed'); 
 
       } 
 
      ) 
 
     }, 
 
     getUser: function() { 
 
      console.log(
 
       '--- GETTER ---' + 
 
       '\nFETCHED USER:' + 
 
       '\nID:  ' + this.user.id  + 
 
       '\nFORENAME: ' + this.user.forename + 
 
       '\nSURNAME: ' + this.user.surname 
 
      ); 
 
      return this.user; 
 
     } 
 
    } 
 
})

...理解されるだろうので、私は、なぜ全くわからないんだけど
+0

私はまだログに 'undefined'値を取得しています。悲しいことに、働いていないようです。 –

関連する問題