从angularJS中的服务调用异步任务时，bootstrap typeahead不起作用 [英] Bootstrap typeahead doesnt work when call async task from service in angularJS

问题描述

我尝试使用超前引导和有角度的自举.当当前方法在控制器中时-一切正常:

I try to play with bootstrap typeahead and angular. When current method was in controller - all worked fine:

$scope.getLocation_work = function(val) {
    return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
      params: {
        address: val,
        sensor: false
      }
    }).then(function(res){
      var addresses = [];
      angular.forEach(res.data.results, function(item){
        addresses.push(item.formatted_address);
      });
      return addresses;
    });
  };

当我尝试将逻辑投入使用时，我开始出现错误:

When I tried to put the logic into service, I started get errors:

ypeError: Cannot read property 'length' of undefined

在控制器中

$scope.getLocation = function(val) {
            UtilsFactory.getLocation(val).then(function(res){
                var addresses = [];
                angular.forEach(res, function(item){
                    addresses.push(item.formatted_address);
                });
                return addresses;
            });
        };

服务

app.factory('UtilsFactory', ['$http', '$q', function($http, $q) {
                return {
                    getLocation : function(val) {
                          var deferred = $q.defer();
                          var response = $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
                params: {
                    address: val,
                    sensor: false
                }
            });

             deferred.resolve(response);
               return deferred.promise;
                }      
       }
  }
]);

我想念什么吗?

这是柱塞

谢谢

推荐答案

插拔器有2个问题:

(1)不管出于什么原因，您编写 $ http promise回调时，从控制器调用时和从服务返回promise时都不同.但是击中后端的诺言是具有相同结果的同一诺言，因此应以相同的方式处理它:

(1) For whatever reason you were writing $http promise callback differently when called from a controller and differently when a promised was returned from the service. But promise hitting a backend is the same promise with the same results so it should be handled the same:

        $scope.getLocation = function(val) {
            return UtilsFactory.getLocation(val).then(function(res){
                var addresses = [];
                angular.forEach(res.data.results, function(item){
                    addresses.push(item.formatted_address);
                });
                return addresses;
            });
        };

最重要的是，您缺少了 $ scope.getLocation 函数中的 return ！

On top of this you were missing the return in the $scope.getLocation function!

(2) $ http 已经可以使用promise，因此不需要在其上使用 $ q .您可以将服务编写为:

(2) $http already works with promises so there is no need to use $q on top of it. You can write your service as simply as:

app.factory('UtilsFactory', ['$http', function($http) {
  return {
    getLocation : function(val) {
        return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
          params: {
            address: val,
            sensor: false
          }
        });
    }
  };
}]);

最后是固定的插头: http://plnkr.co/edit/hG5iHWWfGq3QNAp6J8YSW?p=preview

这篇关于从angularJS中的服务调用异步任务时，bootstrap typeahead不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！