AngularJS Controller ausfällt Daten laden

Question

Ich versuche, einen Controller zu bekommen, um seine Daten vom Server abrufen, wenn es um Anwendungen geht, aber aus irgendeinem Grunde nicht sieht richtig funktioniert:

app.controller('eventListController', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) { 
    var eventList = this, 
     getEventList = function() { 
      var promise = $http.get('../json/Login.json'); 
      promise.then(function (response) { 
       eventList = response.data; 
      }, function (error) { 
       window.alert('Error' + error); 
      }); 
     }; 

    getEventList(); 
}]); 

Es scheint ziemlich einfach, aber EventList lädt nicht korrekt

Was mache ich falsch?

Hier ist etwa, was die JSON sieht aus wie

{ 
"eventHead": [ 
    { 
     stuff stuff 
    }, 
    { 
     more stuff 
    } 
], 
"success": true 

}

, wenn ich tun ein

window.alert(eventList); 

nach dem

getEventList(); 

I [object Object] erhalten , was normal erscheint

aber wenn ich

window.alert(eventList.success); 

ich undefined

und außerdem hat meine Daten laden einfach nicht in die Seite

Answer 1

Sie wollen nicht den Verweis aus this zu überschreiben (Ihr Controller) mit dem Ergebnis (BEARBEITEN: Was ich meine ist, dass Sie nicht mehr den Controller referenzieren und stattdessen nur auf die Daten verweisen - auf die in der Ansicht nicht zugegriffen werden kann). Sie möchten eine Eigenschaft auf dem Controller festlegen - ich nehme an, Sie verwenden die controller as Syntax? Dies würde eine bessere Arbeit an, was ich denke, Sie versuchen zu erreichen:

app.controller('eventListController', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) { 
    var that = this; 

    var getEventList = function() { 
     var promise = $http.get('../json/Login.json'); 
     promise.then(function (response) { 
      that.eventList = response.data; 
     }, function (error) { 
      console.log('Error', error); 
     }); 
    }; 

    getEventList(); 
}]); 

EDIT: Es ist mir mehrmals darauf hingewiesen, dass die oben (Frage) Syntax korrekt ist. Ich stimme zu - es ist nur eine schlechte Übung. Sie sollten nicht mehrere Variablen mit und Zeilenumbrüche definieren. Ich denke, die meisten JavaScript-Entwickler würden zustimmen, dass es nicht zur Lesbarkeit beiträgt (ich denke, dass ich es falsch gelesen habe, beweist das).

Answer 2

Ihr Problem ist in Fragen eigentlich gut beschrieben wie: How do I return the response from an asynchronous call?

window.alert(eventList); Aufruf [object Object] zurückkehrt, weil Sie es zu eventList = this zugewiesen.

Die Funktion getEventList() ist asynchron, daher ist die Antwort nicht sofort verfügbar. Sie tun können:

var getEventList = function (callback) { 
    var promise = $http.get('../json/Login.json'); 
    promise.then(function (response) { 
     eventList = response.data; 
     callback(eventList); 
    }, function (error) { 
     window.alert('Error' + error); 
    }); 
}; 

getEventList(function(response) { 
    console.log(response.success); 
}); 

Aber lieber einen Blick auf die Antwort, die ich oben und how to use Promises in Angular sehen erwähnt.

Answer 3

Daumen nach oben zu Per Hornshøj-Schierbeck und Martin, der mich in die richtige Richtung gesetzt, scheint dies

app.controller('eventListController', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) { 
    var events= this; 

    var getEventList = function() { 
     var promise = $http.get('../json/Login.json'); 
     promise.then(function (response) { 
      events.eventList = response.data; 
     }, function (error) { 
      window.alert('Error' + error); 
     }); 
    }; 

    getEventList(); 
}]); 

Ich hoffe, die Syntax ist eine gute Praxis zu arbeiten, wenn krank nicht froh sein, irgendwelche Ratschläge zu erhalten