Question

我有这个HTML：

  <div class='container-fluid' ng-controller="TypeaheadCtrl">
    <p></p>
    <b>Selected User</b>
    Enter a name: <input type="text" ng-model="selected" typeahead="user as (user.first + ' ' + user.last) for user in users | filter:$viewValue" />
</div>

这个控制器：

app.controller('TypeaheadCtrl', ['$scope', 'getUser',function($scope, getUser) { 

  $scope.selected = "";
  getUser.success(function(data) { 
      $scope.users = data; 
  });

}]);

和这项服务：

app.factory('getUser', ['$http', function($http) { 

  return $http.get('https://myUrl?param=Foo') 
            .success(function(data) { 
              return data; 
            }) 
            .error(function(err) { 
              return err; 
            }); 
}]);

如何将参数传递给服务以使URL中的param值动态化？

Answer 1

改变最小化的最简单方法是更改工厂以使其返回函数

app.factory('getUser', ['$http', function($http) { 

    var httpReq = function(param){
        return $http.get('https://myUrl?' + param + '=Foo') 
            .success(function(data) { 
              return data; 
            }) 
            .error(function(err) { 
              return err; 
            }); 
    }

    return httpReq; 
}]);

现在您可以将值传递到工厂

app.controller('TypeaheadCtrl', ['$scope', 'getUser',function($scope, getUser) { 

  $scope.selected = "";
  getUser('paramValue').success(function(data) { 
      $scope.users = data; 
  });

}]);

Answer 2

factory创建一个对象并将其作为公共可用的操作返回。因此，您可以创建并返回包装HTTP调用的对象：

app.factory('getUser', ['$http', function($http) { 

    function myInternal(arg1) {
        return $http.get('https://myUrl?param=' + arg1) 
            .success(function(data) { 
              return data; 
            }) 
            .error(function(err) { 
              return err; 
            });
    }
    return {
        makeMyCall: function(arg1) {
            return myInternal(arg1);
        }
    };

}]);

然后从控制器中调用传递参数的getUser.makeMyCall函数。

顺便说一句，如果您没有向promise链中添加任何内容，则无需在工厂中处理success和error函数：

    function myInternal(arg1) {
        return $http.get('https://myUrl?param=' + arg1);
    }
    return {
        makeMyCall: function(arg1) {
            return myInternal(arg1);
        }
    };

Answer 3

app.controller('TypeaheadCtrl', ['$scope', 'getUser',function($scope, getUser) { 

  $scope.selected = "";
  getUser('Foo').success(function(data) { 
      $scope.users = data; 
  });

}]);


app.factory('getUser', ['$http', function($http) { 

  return function(myParam) {
      return $http.get('https://myUrl', {param:{param:myParam}});      
  };
}]);

将参数传递给工厂以获得服务

3 个答案: