Angular - 尝试访问 $http 之外的值获得成功并将其用作过滤器值

Question

我正在构建一个愚蠢的小足球应用程序。在第一页，我正在尝试加载该国的顶级联赛积分榜和下周的赛程。

我使用 RESTful Web 服务检索数据，因此是异步完成的。 table 很好，但灯具不行。

有一个 fixture 对象数组，其中有一个 'matchday' 和 'status' 属性。如果您查看 'this.getFixtures' 函数，请查看成功代码块。我想做的是只显示特定比赛日的赛程。如果在某个比赛日还剩下一场比赛要打，那么我只想显示那场比赛。如果没有，显示下一个比赛日的赛程。

'status' 属性通常具有 'SCHEDULED' 或 'FINISHED' 的值。在成功代码块中我说：

遍历检索到的所有固定装置。如果安排了这场比赛，那就意味着我们在这场比赛的比赛日。在这种情况下，中断循环。

然后我尝试在 get 方法之外使用该值，但我一直未定义。有什么方法可以在成功块之外访问该值吗？

我将使用 $scope.matchDay 函数，因为 filter.This 将帮助我使用 ng-repeat 仅显示该比赛日的预定赛程。

无论如何，很抱歉啰嗦 post，但这是代码：

HTML:

<div class="grid-x">
<div class="medium-8 medium-offset-2 cell">
    <div id="premier-league-banner">
        <div class="banner-shade">
            <div class="grid-x">
                <div class="medium-5 cell">
                    <table>
                        <tr ng-repeat="team in premierLeagueTable.standing | limitTo: 6">
                            <th>{{ $index + 1 }}</th>
                            <td><img class="prem-thumbnail" src="{{ team.crestURI }}" /></td>
                            <th>{{ team.teamName }}</th>
                            <th>{{ team.playedGames }}</th>
                            <th>{{ team.goalDifference }}</th>
                            <th>{{ team.points }}</th>
                        </tr>
                    </table>
                </div>
                <div class="medium-2 cell">
                    <img src="images/prem-logo.png" />
                </div>
                <div class="medium-5 cell">
                    <table>
                        <tr ng-repeat="fixture in premierLeagueFixtures.fixtures | filter:{matchday: 10}">
                            <th>{{fixture.homeTeamName}}</th>
                            <td>vs</td>
                            <th>{{fixture.awayTeamName}}</th>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

Angular JS

    // MODULE
var quickEleven = angular.module('quickEleven', ['ngRoute', 'ngResource']);

// ROUTES
quickEleven.config(function ($routeProvider) {

    $routeProvider

    .when('/', {
        templateUrl: 'pages/home.htm',
        controller: 'homeController'
    })

});

// CONTROLLERS
quickEleven.controller('homeController', ['$scope', '$resource', '$log', 'footballData', function($scope, $resource, $log, footballData) {

    function getMonday(date) {
        var day = date.getDay() || 7;  
    if( day !== 1 ) 
        date.setHours(-24 * (day - 1)); 
        return date;
    }

    function convertDate(date) {
      var yyyy = date.getFullYear().toString();
      var mm = (date.getMonth()+1).toString();
      var dd  = date.getDate().toString();

      var mmChars = mm.split('');
      var ddChars = dd.split('');

      return yyyy + '-' + (mmChars[1]?mm:"0"+mmChars[0]) + '-' + (ddChars[1]?dd:"0"+ddChars[0]);
    }



    var thisMonday = getMonday(new Date);
    var nextMonday = getMonday(new Date);
    nextMonday.setDate(nextMonday.getDate() + 7);

    $log.info("Boom! " + convertDate(thisMonday));
    $log.info("For! " + convertDate(nextMonday));

    $scope.premierLeagueTable = footballData.getLeagueTable("http://api.football-data.org/v1/competitions/:competitionId/leagueTable", 445);
    //http://api.football-data.org/v1/competitions/:competitionId/fixtures?timeFrameStart=2018-03-01&timeFrameEnd=2018-03-05
    //"http://api.football-data.org/v1/competitions/:competitionId/fixtures/?matchday=9"
    $scope.premierLeagueFixtures = footballData.getFixtures("http://api.football-data.org/v1/competitions/:competitionId/fixtures?timeFrameStart=" + convertDate(thisMonday) + "&timeFrameEnd=" + convertDate(nextMonday), 445);
     $log.info($scope.premierLeagueFixtures);
     $log.info($scope.premierLeagueTable);

    $scope.matchdayValue = 9;

    $scope.matchDay = function() {
        return footballData.getMatchday();
    };

}]);


quickEleven.service('footballData', ['$resource', '$log', function($resource, $log) {

    //Referring to the latest matchday with the status as 'SCHEDULED'
    var self = this;
    var test;
    self.latestScheduledMatchday = 0;

    self.getMatchday = function() {
        $log.info("This is: " + test);
        return self.latestScheduledMatchday;
    }

    this.getLeagueTable = function (footballUrl, compId) {
        this.footballAPI = 
            $resource(footballUrl, {}, {    
                get: {
                    method: "GET",
                        headers: {
                            "X-Auth-Token": "f73808b698e84dccbe4886da3ea6e755"
                        }
                }
            })

            .get({
                competitionId: compId
            }, function(data) {
                this.fussball = data; 
            }, function(err) {
                $log.error(err);
            });

        return this.footballAPI;
    };



    this.getFixtures = function (footballUrl, compId) {
  //      var self;
        this.footballAPI = 
            $resource(footballUrl, {}, {    
                get: {
                    method: "GET",
                        headers: {
                            "X-Auth-Token": "f73808b698e84dccbe4886da3ea6e755"
                        }
                }
            })

            .get({
                competitionId: compId
            }, function(data) {
//                self = data.fixtures;
                self.latestScheduledMatchday = data.fixtures[0].matchday
                for (var i = 0; i < data.fixtures.length; i++) {
                    var fixture = data.fixtures[i];

                    if (fixture.status == 'SCHEDULED') {
                        test = fixture.matchday;
                        break;
                    } 
                }
                $log.info("Dollar signs... " + test);
            }, function(err) {
                $log.error(err);
            });

        return this.footballAPI;
    };
}]);

Answer 1

到目前为止我看到了 2 个问题。关于未定义值的注意事项之一是您的服务可能无法正确实施。据我所知，您应该 returning "function($resource, $log) {" 函数中的服务。

以下是我的更改方式（请注意，我尚未对此进行测试）

quickEleven.service('footballData', ['$resource', '$log', function($resource, $log) {

  //Referring to the latest matchday with the status as 'SCHEDULED'
  var wrappedService = {};
  var test;
  var latestScheduledMatchday = 0;

  var getMatchday = function() {
      $log.info("This is: " + test);
      return latestScheduledMatchday;
  }

  wrappedService.getLeagueTable = function (footballUrl, compId) {
      wrappedService.footballAPI = 
          $resource(footballUrl, {}, {    
              get: {
                  method: "GET",
                      headers: {
                          "X-Auth-Token": "f73808b698e84dccbe4886da3ea6e755"
                      }
              }
          })

          .get({
              competitionId: compId
          }, function(data) {
              wrappedService.fussball = data; 
          }, function(err) {
              $log.error(err);
          });

      return wrappedService.footballAPI;
  };



  wrappedService.getFixtures = function (footballUrl, compId) {
      wrappedService.footballAPI = 
          $resource(footballUrl, {}, {    
              get: {
                  method: "GET",
                      headers: {
                          "X-Auth-Token": "f73808b698e84dccbe4886da3ea6e755"
                      }
              }
          })

          .get({
              competitionId: compId
          }, function(data) {
              latestScheduledMatchday = data.fixtures[0].matchday
              for (var i = 0; i < data.fixtures.length; i++) {
                  var fixture = data.fixtures[i];

                  if (fixture.status == 'SCHEDULED') {
                      test = fixture.matchday;
                      break;
                  } 
              }
              $log.info("Dollar signs... " + test);
          }, function(err) {
              $log.error(err);
          });

      return wrappedService.footballAPI;
  };
  return wrappedService;
}]);

因此，您的服务不是 return 没有服务的功能，而是按照我相信您的意图包装和 returned 的。我还删除了对 "self" 的引用，因为您在那里的意图（内部服务变量）在函数中使用 var 范围更能雄辩地处理。

服务正常运行后您将看到的第二个问题。

    $scope.premierLeagueTable = footballData.getLeagueTable("http://api.football-data.org/v1/competitions/:competitionId/leagueTable", 445);

这一行不是return请求数据，而是return请求对象。事实上，在设置 $scope.premierLeagueTable 时，请求甚至还没有完成。你得到的是访问一个承诺，你可以在其中放入回调函数。请参阅 angular 资源文档以获取更多信息，特别是用户资源部分中的第三个示例，你会在其中看到 .$promise https://docs.angularjs.org/api/ngResource/service/$resource#user-resource.

无论您想将数据 return 应用到什么功能，都应该存在于 .$promise.then(...) 回调中。我不完全确定那里的承诺是否收到响应数据，或者您的回调 return。您必须进一步阅读或进行实验才能找出答案。

Angular - 尝试访问 $http 之外的值获得成功并将其用作过滤器值

Angular - Trying to access value outside of $http get success and use it for a filter value

angularjs

angular-http

ngresource