controller.jsによってフェッチされたデータを印刷できません

Question

これは初めてのことで、ダミーの連絡先リストを作成しようとしています。 mongodbからデータを取得するログを出力しましたが、ブラウザのコンソールに正しいデータが表示されますが、htmlファイルで印刷しようとすると表示されません。私はこのデータを印刷しよう

controller.js

var myApp = angular.module('myApp', []); 
myApp.controller('AppCtrl', ['$scope', '$http', function($scope, $http){ 
$http.get('/contactlist').then(function(response){ 
console.log("I got the response"); 
console.log(response); //able to see correct data is fetched in the browser console 
$scope.contactlist=response; 
}); 
}]) 

表：

<tbody> 
    <tr ng-repeat="Contact in contactlist"> 
     <td>{{Contact.name}}</td> 
     <td>{{Contact.email}}</td> 
     <td>{{Contact.number}}</td> 
    </tr> 
</tbody> 

が間違って何が起こっているかを説明してください

は、ここでのスニペットです。コンソールに示す

応答：

Answer 1

JavaScriptが常に同期しています。ここで何が起きているのですか？​​は$http.get('/contactlist')...が完了する前に実行されています。つまり、$scope.contactlistは未定義です。この問題を解決するには Serviceを使用することをお勧めします。

var myApp = angular.module('myApp', []); 
myApp.controller('AppCtrl', ['$scope', 'dataService', function($scope, dataService){ 

    dataService.contactLists(function(response) { 
    console.log(response.data); 
    $scope.contactlist=response.data; 
    }); 

}); 
}]) 

myApp.service('dataService', function($http) { 
    this.contactLists = function(callback){ 
    $http.get('/contactlist').then(callback) 
    } 
});