来自$ resource的数据未同步到来自HTML的调用

时间:2015-10-27 08:36:03

标签: javascript html angularjs

我能够在控制器中获取在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];

控制器:

    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, 普山

2 个答案:

答案 0 :(得分:0)

如果您希望$resourcetypeahead一起使用,则无法使用正常的回调。你需要回复一个承诺。

返回$resource请求的承诺:

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

使用回调函数返回$resource请求的承诺;

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

请参阅example - 异步结果

答案 1 :(得分:-1)

你要回报一个承诺而不是价值。那就是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);
    });
};