Javascript 第一次单击时返回未定义的AngularJS

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

我的问题是，即使数据在页面加载中正确加载，当我第一次单击按钮时，我得到

$scope.newEvents的
undefined
，即使它成功地从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>

输出

    <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>

当页面加载其正常工作时，它会发出一个成功的请求并更新
$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
函数的按钮时，我的数据就没有定义。我最初认为日期格式有问题，但它成功获取数据的事实让我困惑。问题从
开始，然后是下面的

        $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"
}

在我看来，对您的服务的getEvents调用返回了一个承诺。然后在承诺上异步调用传递的函数。因此，您的$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);
            });
        });

    }
}

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);
  });
});

将
forEach
放在回调中（在
$scope.newEvents=data.data；
之后）