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

Data from $resource not synchronized to call from HTML

本文关键字：HTML 调用 同步 resource 数据      更新时间：2023-09-26

我能够在控制器中的vm.getProduct（）中获得返回的数组的print。但这在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];

控制器：

    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，Bhushan

如果您想将$resource与typeahead一起使用，则不能使用普通回调。你需要回报一个承诺。

返回$resource请求的承诺：

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);
         });
    });
};

参见示例-异步结果

您返回的是承诺而不是值。这就是vm.getProduct是一个返回promise而非数据的函数。

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));
}

您应该将其设置为任何vm属性，如

vm.getProduct = function ($viewValue) {
    return DataService.getProductTypeAhead($viewValue, function (response) {
        console.log(response);
        vm.myProperty = cleanResponse(response);
        return cleanResponse(response);
    });
};
相关文章：