AngularJS 在第一次 ng-click 时返回 undefined答案

【问题标题】：AngularJS returning undefined on first ng-clickAngularJS 在第一次 ng-click 时返回 undefined
【发布时间】：2014-09-25 17:20:33
【问题描述】：

我正在构建一个系统，该系统根据使用 AngularJS 发送到 API 的日期获取新事件。我目前仍处于 AngularJS 的学习阶段，所以我想知道我缺少什么。

我的问题是，即使数据在页面加载时正确加载，当我第一次单击按钮时，我得到 undefined for $scope.newEvents 即使它已成功从 API 获取数据（我可以在控制台中查看）。

我正在尝试构建一个 JSFiddle，但我无法让整个事情在上面运行。

这里是html输出...

输出...

    <ul>
      <li ng-repeat="event in events | orderBy:'-event_date' ">
        <span >{{event.event_date}},{{event.event_name}}, {{event.event_venue}}, {{event.event_description}} </span>
      </li>
    </ul>

我的 js 中的 get 请求...

var eventApp = angular.module('eventApp', ['ngRoute']);


eventApp.factory("services", ['$http', function($http) {

    var apiBase = 'http://example.net/angular-api/'

    var service = {};

    service.getEvents = function(latest_date){
        return $http.get(apiBase + 'events?latest_date=' + latest_date);
    }

    return service;   
}]);

当页面加载正常时，它会发出成功的请求并更新$scope.events ...

var date = new Date();

$scope.todays_date = date.getUTCFullYear() + '-' +
    ('00' + (date.getUTCMonth()+1)).slice(-2) + '-' +
    ('00' + date.getUTCDate()).slice(-2) + ' ' + 
    ('00' + date.getUTCHours()).slice(-2) + ':' + 
    ('00' + date.getUTCMinutes()).slice(-2) + ':' + 
    ('00' + date.getUTCSeconds()).slice(-2);

$scope.events = [{}];

services.getEvents($scope.todays_date).then(function(data){
    $scope.events = data.data;

});

但是，当单击加载 ng-click 函数的按钮时，我的数据未定义。我最初认为日期格式有问题，但它成功获取数据的事实让我感到困惑。问题从下面的then开始...

        $scope.addFiveNew = function (new_or_old) {

        if (new_or_old == 'new') {

            $scope.latest_date = $scope.getNewestDate();


            services.getEvents($scope.latest_date).then(function(data){
                $scope.newEvents = data.data;
            });

            console.log($scope.newEvents);

            // update the list (this is currently failing on first click)
            angular.forEach($scope.newEvents,function(item) {
                $scope.events.push(item);
            });


        }

控制器中的这个函数创建要发送的日期...

$scope.getNewestDate = function() {
        var sortedArray = $filter('orderBy')($scope.events, 'event_date');
        var NewestDate = sortedArray[sortedArray.length - 1].event_date;
        return NewestDate;
    };

这是一些数据的示例......

{
 "event_id":"1",
 "event_name":"Event 1",
 "event_date":"2014-09-26 00:00:00",
 "event_venue":"Limerick",
 "event_description":"stuff"
}

【问题讨论】：

把forEach放在回调里面（$scope.newEvents = data.data;之后）

标签： javascript angularjs

【解决方案1】：

then 中的位是异步的，因此您的其余代码可以在不通过返回服务方法更新范围的情况下运行，对吧？

services.getEvents($scope.latest_date)
.then(function(data){            //whenever the service returns
  $scope.newEvents = data.data;  //update the scope

  console.log($scope.newEvents); //log the results

  // update the list
  angular.forEach($scope.newEvents,function(item) {
     $scope.events.push(item);
  });
});

【讨论】：

【解决方案2】：

在我看来，对您的服务的 getEvents 调用正在返回一个承诺。在 promise 上调用 .then 将异步调用传递的函数。所以，你的 $scope.newEvents = data.data;将在该块中的其余语句之后被调用。我认为您可以将 .then 语句更改为以下内容，它应该可以工作：

$scope.addFiveNew = function (new_or_old) {

    if (new_or_old == 'new') {

        $scope.latest_date = $scope.getNewestDate();

        services.getEvents($scope.latest_date).then(function(data){
            $scope.newEvents = data.data;
            console.log($scope.newEvents);
            // update the list (this is currently failing on first click)
            angular.forEach($scope.newEvents,function(item) {
                $scope.events.push(item);
            });
        });

    }
}

【讨论】：