Question

我正在构建一个愚蠢的小足球应用程序。在第一页上，我试图加载该国的顶级分区排名和下周的赛程。

我使用RESTful Web服务检索数据，因此异步完成。表很好，但不是固定装置。

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

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

循环检索所有灯具。如果安排了这个灯具，那意味着，我们正处于这个灯具的比赛日。在这种情况下，中断循环。

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

我将使用$ scope.matchDay函数作为过滤器。这将帮助我仅使用ng-repeat显示该比赛日的预定装置。

无论如何，对于冗长的帖子感到抱歉，但这是代码：

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个问题。一个关于未定义值的注释是您的服务可能无法正确实现。 AFAIK你应该在“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;
}]);

因此，不是没有返回任何服务的函数，而是将您的服务包装起来并返回，因为我相信您的意图。我还删除了对“self”的引用，因为你的意图（内部服务变量）在函数中使用var scoping更有说服力。

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

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

此行不返回请求数据，但返回请求对象。事实上，在设置$ scope.premierLeagueTable时，请求尚未完成。你得到的是访问你可以放入回调函数的承诺。有关更多信息，请参阅角度资源文档，特别是您看到的用户资源部分中的第三个示例。$ promise https://docs.angularjs.org/api/ngResource/service/ $ resource ＃用户的资源。

无论你想要应用什么功能，数据返回都应该存在于。$ promise.then（...）回调中。我不完全确定那里的承诺是否收到响应数据或回调。你必须进一步阅读或尝试找出它。

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

1 个答案: