如何使用 AngularJS 进行动态 $HTTP 请求？

Question

在我的控制器中，我使用 $http.get(..) 从 URL 请求 JSON，它可以将日月日作为变量。这些默认设置为今天的日期。我的视图中有三个输入框，我试图允许用户根据他们在这些输入框中输入的内容使用 ng-model 更改 URL，但我不知道这是正确的方法还是有更好的方法解决问题吗？

app.controller("View1Ctrl", function($scope, $http) {
    function minTwoDigits(n) {
        return (n < 10 ? '0' : '') + n;
    }
    var year = new Date().getFullYear();
    var month = new Date().getMonth();
    var day = new Date().getDate();
    month = month+1;
    month = minTwoDigits(month);
    day = minTwoDigits(day);

    $http.get('http://gd2.mlb.com/components/game/mlb/year_'+   year +'/month_'+ month +'/day_'+ day +'/master_scoreboard.json')
        .success(function(data, status, headers, config) {
            $scope.games = data;
            console.log($scope.games);
        })
        .error(function(data, status, headers, config) {
            // log error
        });
});

Answer 1

调用时需要使用基于服务的方法

angular.module('test')
  .service('testService', function ($http) {


      this.getValue= function (year,day,month) {
      var endpoint = "http://gd2.mlb.com/components/game/mlb/year_'+ year +'/month_'+ month +'/day_'+ day +'/master_scoreboard.json";

      return  $http({
        method: 'GET',
        url: endpoint
      });
    };

在你的控制器中

app.controller("View1Ctrl", function($scope, testService) {

    $scope.getData= function () {
          testService.getValue( year,day,month).then(
             function successCallback(response) {
                console.log(response);

            },
            function errorCallback(response) {

            });


        };


}

Answer 2

放置在控制器中的任何代码仅在创建控制器对象时执行一次。您可以将其视为构造函数。因此，如果您希望您的代码多次运行，您必须将它放在一个函数中，然后运行该函数每当发生任何变化时。

因此您的控制器可能看起来像这样：

app.controller("View1Ctrl", function($scope, $http) {

    // Run initialize once
    initialize();

    function initialize(){
        $scope.year = new Date().getFullYear();
        $scope.month = new Date().getMonth();
        $scope.day = new Date().getDate();
        $scope.month = month+1;

        loadGames();
    }

    function loadGames(){
        var year = $scope.year;
        var month = minTwoDigits($scope.month);
        var day = minTwoDigits($scope.day);

        $http.get('http://gd2.mlb.com/components/game/mlb/year_'+   year +'/month_'+ month +'/day_'+ day +'/master_scoreboard.json')
            .success(function(data, status, headers, config) {
                $scope.games = data;
                console.log($scope.games);
            })
            .error(function(data, status, headers, config) {
                // log error
            });
    }

    function minTwoDigits(n) {
        return (n < 10 ? '0' : '') + n;
    }
});

然后你可以运行这个 loadGames() 函数在点击一个按钮时，或者作为一个 ng-change 事件，像这样：

<button ng-click="loadGames()">Load</button>

根据 BOSS 的回答，您可以（并且绝对应该）将其中的一些分离成一个服务，但这并不是绝对必要的。

如何使用 AngularJS 进行动态 $HTTP 请求？

How To Make Dynamic $HTTP Request Using AngularJS?

controller

angularjs

angular-ngmodel