如何将我的请求数据放入我的 $scope

Question

我目前真的坚持这个话题。

我想将从 Express 检索到的响应数据附加到我的角度 $scope，然后将用户重定向到他们的个人资料页面。

我的控制器函数如下所示：

$scope.login = function($event){
    $event.stopPropagation();
    $http({
      method: 'POST',
      url: '/login',
      data: {
          email: $scope.email,
          password: $scope.password
      }
  }).success(function(data){
      console.log(data.events)
      $scope.events = data.events
      $location.path('/profile');
  }).error(function(err){
      console.log(err)
  })

一旦我尝试登录，我就会得到记录的数据，然后我会根据需要重定向。但是我的 ng-repeat 指令没有更新。

我记录的数据的 JSON 输出：

[{
"type":"fussball",
"distance":"1",
"date":"Morgen",
"time":"10:30",
"maxAttendees":10,
"attendees:[
1345455466,
323232324,
454554534343,
898493839489,
892839283928,
283293283983]}

ng-重复部分：

<div ng-class="{'first': $first}" class="event-item"ng-repeat="event in events">
    <div class="event-type {{event.type}}"></div>
    <div class="event-seperator"></div>
    <div class="event-body">
        <div class="event-body-inner">
            <span class="date"></span>
            <p class="main">{{event.date}}</p>
            <p class="sub">{{event.time}}</p>
        </div>
        <div class="event-body-inner">
            <span class="attendees"></span>
            <p class="main">{{event.attendees.length}}{{checkAttendees($index)}}</p>
            <p class="sub">TEILNEHMER</p>
        </div>
        <div class="event-body-inner">
            <span class="distance"></span>
            <p class="main">{{event.distance}}</p>
            <p class="sub">KM</p>
        </div>
    </div>
    <div class="event-seperator"></div>
    <div ng-click="selecEvent($event)" class="eventGo hvr-bounce-to-left">
        <p>GO</p>
    </div>
    <div class="event-clicked">
        <p>+  ZU <a href="/#/events">DEINEN EVENTS</a> HINZUGEFÜGT</p>
    </div>

我实际上对异步/同步编程不太熟悉，所以我希望有人能给我一个提示；）。

提前致谢！

Answer 1

你需要告诉 Angular 事件列表上有一个异步更新

  }).success(function(data){
  console.log(data.events)
  $scope.events = data.events
  $scope.$apply(); // <----- try to add this line
  $location.path('/profile');

也许你想阅读：

When to use $scope.$apply()

观看：

Difference between $apply and $digest

Answer 2

最好的方法是为此使用工厂。我正要写它，但我在另一篇文章中发现了另一个问题。

如果您喜欢评论，请为原始海报投票。

https://stackoverflow.com/a/21855302/1549291

编辑：为实现添加了 plunker 链接： https://plnkr.co/edit/EimStRS1yMPbiU6PWKJN

(function () {
//factory

angular.module('app')
.factory('appFactory', ['$http', function ($http){

  this.getlist = function(){            
        return $http.get('data.json')
            .then(function(response) {
              return response.data;
            });            
    };
    return this;
}]);

}());

angular.module('app').controller('appCtrl', ['$scope', '$http', '$log','$location', 'appFactory',
//controller   
    function($scope, $http, $log, $location, appFactory) {

    // Chapters  json data
    appFactory.getlist()
    .then(function(data) {
        $scope.events = data;
    });

}]);