在angularjs中使用typeahead将参数从控制器传递给service



SO的回答看Plunker

恰好例子

学习角度和控制器中有一个参数cityName,我不确定它是如何工作的。

我想做的是,我有一个myController.js文件

var app = angular.module("sampleApp");
app.controller('TypeaheadCtrl',['$scope','search', function ($scope, search) {
   $scope.displayed=[];
    search.getResult(searchQuery)
          .then(function (data) {
              $scope.displayed = (data.records);
          });
}]);

myService.js

angular.module('sampleApp').factory('search', ['$q', '$http', function ($q, $http) {
    var sdo = {
        getResult: function (searchQuery) {
            var promise = $http({
                method: 'GET',
                url: 'http://somewhere.com'
                params: {
                    q: "a"
                }
            });
            promise.success(function (data, status, headers, conf) {
                return data;
            });
            return promise;
        }
    }
    return sdo;
}]);

我希望能够在输入第三个字符后调用服务,并将这些字符传递给服务

您应该在typeahead输入元素上使用typeahead-min-length="3"选项。

<input type="text" ng-model="result" 
  typeahead="suggestion for suggestion in getSuggestion($viewValue)" 
  typeahead-min-length="3"/>

然后在控制器内部有一个函数,它将再次返回一个承诺。

$scope.getSuggestion = function (searchQuery){
    return search.getResult(searchQuery)
      .then(function (data) {
          return data.records;
    });
};

由于您使用了.success,因此数据将返回getResult函数。使用.then来链接promise,这样你就可以从成功回调中返回一个数据。

angular.module('sampleApp').factory('search', ['$q', '$http', function($q, $http) {
  var sdo = {
    getResult: function(searchQuery) {
      var promise = $http({
        method: 'GET',
        url: 'http://somewhere.com'
        params: {
          q: searchQuery //<-- pass parameter here
        }
      });
      promise.then(function(response) {
        //you could format data here and returned formatted result
        //or you could also do some sort of validation or filtering on data
        return response.data;
      });
      return promise;
    }
  }
  return sdo;
}]);

像这样改变你的服务

app.factory('search', ['$q', '$http', function($q, $http) {
  var sdo = {};
  sdo.getResult = function(query) {
    var deferred = $q.defer();
    var url = "http://someurlpath/api/" + query;
    $http.get(url)
      .success(function(data) {
        deferred.resolve(data.data);
      }).error(function(msg, code) {
        deferred.reject(msg);
      });
    return deferred.promise;
  };
  return sdo;
}]);

相关内容