Wie bekomme ich meine Anfrage Daten in meine $ Scope

Question

Ich bin derzeit wirklich auf diesem Thema fest.

Ich möchte die Antwortdaten, die ich von Express abrufe, an meinen eckigen $ scope anhängen und den Benutzer dann auf seine Profilseite umleiten.

Mein Controller-Funktion sieht wie folgt aus:

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

Sobald ich versuche einzuloggen ich die protokollierten Daten bekommen und dann bin ich nach Wunsch umgeleitet. Aber meine ng-repeat-Direktive wird nicht aktualisiert.

JSON Ausgabe von meinen protokollierten Daten:

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

ng-repeat Abschnitt:

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

Ich bin eigentlich nicht so vertraut mit Asynchroner/synchroner Programmierung so dass ich hoffe, jemand kann mir einen Hinweis geben;).

Vielen Dank im Voraus!

Answer 1

Der beste Weg ist, eine Fabrik dafür zu verwenden. Ich wollte es gerade schreiben, aber ich fand eine andere Frage in einem anderen Beitrag.

Bitte bewerten Sie das Originalplakat, wenn Ihnen der Kommentar gefällt.

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

EDIT: Hinzugefügt Plunker Link für die Umsetzung: 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; 
    }); 

}]); 

Answer 2

Sie müssen Winkel sagen, dass es auf der Ereignisliste ein Asynchron-Update ist

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

Vielleicht Sie möchten lesen:

When to use $scope.$apply()

und sehen:

Difference between $apply and $digest