$ httpでサービスからのデータをリフレッシュすると、角度表示が更新されない

Question

これは1万回質問されるかもしれませんが、この問題に対する適切な解決策はまだ見つかりません。

私はちょうど$httpをAPI（またはJSONファイル）から非同期的にフェッチするために、サービスからデータを取得するコントローラの古典的な例を持っています。コントローラ内のデータはサービス内のオブジェクトへの参照であるため、サービスが完了した時点でデータが変更されることを期待していたため、ビューが更新されることを期待していました。下のスニペットで見ることができるように、ビューは初期値を保持します。

このように、私の二つの質問：

1. これは良好なパターンますか？コントローラが複数存在し、特定の時点でデータを再フェッチする必要があるとします（コントローラで更新される）。
2. ビューが更新されないのはなぜですか？

$ scope（可能な場合）や$ rootSscope、$ watchも使用しないことに注意してください。

var app = angular.module('myApp', []) 
 
.service('Service', ['$http', service]) 
 
.controller('Controller', ['Service', controller]); 
 

 

 
function controller(Service){ 
 
    var c = this; 
 
    c.items = [ 
 
     {'title': 'Default title1'}, 
 
     {'title': 'Default title2'} 
 
    ]; 
 
    c.items = Service.data; 
 
} 
 

 
function service($http, $scope){ 
 
    var data = [ 
 
     {'title': 'olddatatitle'} 
 
    ]; 
 
    $http({ 
 
     method: 'GET', 
 
     url: 'https://jsonplaceholder.typicode.com/posts?userId=1', 
 
     cache: true 
 
    }).then(function(response){ 
 
     data = response.data; 
 
    }); 
 
    return { 
 
     data: data 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" > 
 
    <ul ng-controller="Controller as c"> 
 
    <li ng-repeat="item in c.items"> 
 
     {{item.title}} 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

あなたの問題は非同期のものです...あなたのサービス内の$httpからデータを取得したいのではなく、コントローラが準備ができたら準備ができていると思います。

が

function service($http, $scope){ 
    //var data = [ 
    // {'title': 'olddatatitle'} 
    //]; 

    return { 
     getData: function() { 
     return $http({ // calls to $http return a promise object 
      method: 'GET', 
      url: 'https://jsonplaceholder.typicode.com/posts?userId=1', 
      cache: true 
     }); 
    } 
} 

データが消費する準備ができたとき、あなたのコントローラが正確に知っているその方法は：

function controller(Service){ 
    var c = this; 
    //c.items = [ 
    // {'title': 'Default title1'}, 
    // {'title': 'Default title2'} 
    //]; 
    Service.getData().then(function(response) { // the promise object allows you to assign data only when it's ready 
     c.items = response.data 
    }); 
} 

Answer 2

c.items = Service.data; 

あなたのAPIはレスポンスを返すまでに、JSは、すでに次の文に上を移動しているように、上記の行は、API呼び出しの応答がありません... callbackを提供する必要があります。

Answer 3

あなたは理解していない代わりにデータの約束を返し、データを返すようにしようとしないでください何がpromiseです。実際には、データではなくサービスから約束を返す必要があります。サービス定義の時点では、データはありません。あなたがサービスのためにあなたの電話を完了した後にそこにいることが起こります。だから、約束で動作する部分がないサービス定義では、サービスを利用するコードを呼び出すにする必要があります。

var app = angular.module('myApp', []) 
 
.service('Service', ['$http', service]) 
 
.controller('Controller', ['Service', controller]); 
 

 

 
function controller(Service){ 
 
    var c = this; 
 
    c.items = [ 
 
     {'title': 'Default title1'}, 
 
     {'title': 'Default title2'} 
 
    ]; 
 
    Service.get().then(function(payload) { 
 
    console.log(payload); 
 
     c.items = payload.data; 
 
    }); 
 
} 
 

 
function service($http, $scope){ 
 
    var data = [ 
 
     {'title': 'olddatatitle'} 
 
    ]; 
 
    var get = function() { 
 
    return $http({ 
 
     method: 'GET', 
 
     url: 'https://jsonplaceholder.typicode.com/posts?userId=1', 
 
     cache: true 
 
    })}; 
 
    return { 
 
     get: get 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" > 
 
    <ul ng-controller="Controller as c"> 
 
    <li ng-repeat="item in c.items"> 
 
     {{item.title}} 
 
    </li> 
 
    </ul> 
 
</div>