javascript - 尝试从服务获取数据时 ng-repeat 不起作用

Question

我正在使用 Node JS 和 Angular JS 构建一个应用程序。我从后端得到了数据作为响应。但未能在 UI 中显示数据。

我的代码如下，

var app = angular.module('app', [])

app.controller('appCtrl', ['$scope', '$http', 'storeData', function ($scope, $http, storeData) {

    $scope.searched = []
    $scope.locationSearch = function () {
        google.maps.event.addDomListener(window, 'load', function () {

            // get data from Google Api
            $scope.places = new google.maps.places.Autocomplete(document.getElementById('searchPlaces'));
            google.maps.event.addListener($scope.places, 'place_changed', function () {

                // set the corresponding field 
                $scope.place = $scope.places.getPlace();
                $scope.address = $scope.place.formatted_address;
                $scope.latitude = $scope.place.geometry.location.lat();
                $scope.longitude = $scope.place.geometry.location.lng();
                $scope.mesg = "Address: " + $scope.address + "\nLatitude: " + $scope.latitude + "\nLongitude: " + $scope.longitude;

                // call the service
                $scope.searched = storeData.putData({ "userId": '6235', "place": $scope.address, "latitude": $scope.latitude, "longitude": $scope.longitude })

            })
        })
    }
}])

app.service('storeData', ['$http', function ($http) {
    // this.searchResults = []
    this.putData = function (place) {

        // call the back end
        return new Promise(function (resolve, reject) {
            $http({
                method: 'POST',
                url: '/store',
                headers: 'Content-Type: application/json',
                data: place
            })
        }).then(function (success) {
            console.log(success.data)
            // this.searchResults = success.data
            return success.data
        }).catch(function (err) {
            console.log('unable to process request')
        })
    }
}])

我正在使用 Google Location api 来获取地点搜索框。一切数据都OK。它们被正确发送到后端。 react 良好。

我已使用 Chrome 开发者工具来检查响应。回应一下就好。但我无法在用户界面中显示它。

我的 HTML 代码如下，

<table class="table" ng-controller="appCtrl">
                            <tr ng-repeat="result in searched">
                                <td>{{result.place}} </td>
                                <td>{{result.latitude}} </td>
                                <td>{{result.longitude}} </td>
                            </tr>
                        </table>

不知何故，我必须管理 $scope.searched 才能显示数据。你能告诉我代码中有什么问题吗？以及如何纠正呢？？我想使用Service调用后端并将输出发送到Controller。

Answer 1

您需要正确解析 Promise 并将解析后的数据分配给您的 $scope 变量。目前，您的 $scope 变量具有 promise 而不是数据。试试这个:

 var searchedPromise = storeData.putData({ "userId": '6235', "place": $scope.address, "latitude": $scope.latitude, "longitude": $scope.longitude });
    searchedPromise.then(storeData.promiseResolvingFnInService);
    $scope.searchResults = storeData.searchResults;

和

app.service('storeData', ['$http', function ($http) {
    this.searchResults = [];
    this.promiseResolvingFnInService =  function(response){
      this.searchResults = response.data; //assuming array is inside data prop of API response.
   }
    this.putData = function (place) {

        // call the back end
        return 
            $http({
                method: 'POST',
                url: '/store',
                headers: 'Content-Type: application/json',
                data: place
            });
    }
}])

这应该有帮助。