javascript - $resource 中的数据未同步到 HTML 调用

Question

我能够打印 Controller 中 vm.getProduct() 内返回的数组。但这在 HTML 中不可用。

资源:

                var DataProvider = function ($resource) {
                    return $resource('', {}, {

                        getProductTypeAhead: {
                            method: 'GET',
                            isArray: true,
                            url: '/productinterface?typeahead=:typeAhead',
                            params: {typeAhead: '@typeAhead'}
                        }
                    });
                };

                module.exports = ['$resource', DataProvider];

服务:

        var DataService = function (DataProvider, $scope) {
            this.getProductTypeAhead = function (typeAhead, callback) {
                DataProvider.getProductTypeAhead({typeAhead: typeAhead},
                    function (data) {
                        callback(data);
                    }, function (data) {
                        // NOTIFY THE USER THAT THE REQUEST FAILED
                        callback(null);
                    });
            };
        };

        module.exports = ['DataProvider', DataService];

Controller :

    vm.getProduct = function ($viewValue) {
        return DataService.getProductTypeAhead($viewValue, function (response) {
            console.log(response);
            return cleanResponse(response);
        });
    };


    function cleanResponse(response) {
        return JSON.parse(global.angular.toJson(response));
    }

HTML:

            <input type="text" class="form-control" id="product"
            typeahead-min-length="3"
            typeahead="product as product.legalName for product in vm.getProduct($viewValue)"
            typeahead-template-url="app/main/templates/typeahead-ProductInterface-Template.html"
            ng-model="vm.trade.PRODUCT_NAME">

但是，如果我采用 $http.get() 方法，我可以在 HTML 中看到该数组。

                vm.getProduct1 = function ($viewValue) {
                return $http.get('/productinterface?typeahead=' + $viewValue).then(function (response) {
                    console.log(response.data);
                    return response.data;
                });
            };

我检查了同步 $resource 调用的帖子。在这方面运气不佳。任何有关此问题的指示将不胜感激。

TIA，不山

Answer 1

如果您想将 $resource 与 typeahead 一起使用，则不能使用正常的回调。您需要返回一个 promise 。

返回 $resource 请求的 promise :

vm.getProduct = function ($viewValue) {
    return DataService.getProductTypeAhead($viewValue, function (response) { 
        return response;
    }).$promise;
};

返回带有回调的 $resource 请求的 promise ；

vm.getProduct = function ($viewValue) {
    return DataService.getProductTypeAhead($viewValue)
         .$promise.then(function(response) {
              return doSomethingWith(response);
         });
    });
};

参见example - 异步结果