Angular - 将输入值传递给factory $ http查询参数

时间:2017-04-08 22:23:43

标签: angularjs

我创建了一个运行$ http GET方法的工厂。我需要在拉入JSON的URL中添加一个输入值,但是我在从控制器传递它时遇到了麻烦。我可以看到正确创建了URL,我只是错过了"查询"表单输入字段中的参数。

这是我的HTML块:

<input type="string" class="form-control" ng-model="getMovie.title">

这是我的工厂和控制器:

    var app = angular.module('app', []);
    app.factory("getMovie", ['$http',function($http){
    var obj = {};
    var url = "https://api.nytimes.com/svc/movies/v2/reviews/search.json";
    obj.getMovieInfo = function(){ 
    return $http({
        url: url,
        method: "GET",
        params:{ 
            query: this.title, // This is the value I need
            api_key: "68094e1974e7984c256beb1653319915:3:33678189",
            callback: "JSON_CALLBACK"
      },
        headers: {
            "Content-Type" : "application/json"
        }
     }).then(function successCallback(response) {
            this.movieReviews = response.data.results; 
      }, function errorCallback(response) {
            console.log("Nothing to see here...");
      });
    }
        return obj;
    }]);

app.controller('moviesCtrl', ["$scope", "getMovie", function($scope, getMovie){
    $scope.findMovie = function(){
        getMovie.getMovieInfo().then(function(response){
            $scope.results = response;
        });
    }
}]);

谢谢!

2 个答案:

答案 0 :(得分:1)

我建议你不要使用this。如果要使用controllerAs语法,请像这样使用。你可以在这里看到更多

https://github.com/johnpapa/angular-styleguide/tree/master/a1#controllers

  app.factory("getMovie", ['$http',function($http){  
 var  vm = this
    vm.getMovie ={};

在ajax中

return $http({
        url: url,
        method: "GET",
        params:{ 
            query: vm.getMovie, // This is the value I need
            api_key: "68094e1974e7984c256beb1653319915:3:33678189",
            callback: "JSON_CALLBACK"
      },
        headers: {
            "Content-Type" : "application/json"
        }
     }).then(function successCallback(response) {
            vm.movieReviews = response.data.results; 
      }, function errorCallback(response) {
            console.log("Nothing to see here...");
      });
    }
        return obj;
    }]);

答案 1 :(得分:1)

您可以将标题作为参数发送到工厂方法。

<input type="string" class="form-control" ng-model="title">
var app = angular.module('app', []);

app.factory("getMovie", ['$http',function($http){
var obj = {};
var url = "https://api.nytimes.com/svc/movies/v2/reviews/search.json";
obj.getMovieInfo = function(title){ 
return $http({
    url: url,
    method: "GET",
    params:{ 
        query: title, // This is the value I need
        api_key: "68094e1974e7984c256beb1653319915:3:33678189",
        callback: "JSON_CALLBACK"
  },
    headers: {
        "Content-Type" : "application/json"
    }
 }).then(function successCallback(response) {
        this.movieReviews = response.data.results; 
  }, function errorCallback(response) {
        console.log("Nothing to see here...");
  });
}
    return obj;
}]);

app.controller('moviesCtrl', ["$scope", "getMovie", function($scope, getMovie){
    $scope.findMovie = function() {
        getMovie.getMovieInfo($scope.title).then(function(response){
            $scope.results = response;
        });
     }
}]);
相关问题