AngularJS Контроллер не может загрузить данные

Question

Я пытаюсь получить контроллер для извлечения его данных с сервера, когда он приходит в к использованию, но по каким-то причинам это не видит, чтобы работать должным образом:

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

It кажется довольно простым, но eventList правильно загружается

Что я делаю неправильно?

Вот примерно то, что выглядит как

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

}

если я сделать

window.alert(eventList); 

после

getEventList(); 

Я получаю [объект Object] JSON , который кажется нормальным

, но если я

window.alert(eventList.success); 

я неопределенными

и, кроме того, мои данные просто не загружается на страницу

Answer 1

Вы не хотите, чтобы перезаписать ссылку из this (ваш контроллер) с результатом (EDIT: я имею в виду, что вы больше не ссылаетесь на контроллер и вместо этого просто ссылаетесь на данные, которые не будут доступны в представлении). Вы хотите установить свойство на контроллере - я полагаю, вы используете синтаксис controller as? Это будет делать лучше на то, что я думаю, что вы пытаетесь достичь:

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: Было отмечено, мне несколько раз, что выше (вопрос) синтаксис является правильным. Я согласен - это просто плохая практика. Вы не должны определять несколько переменных с символами новой строки. Я думаю, что большинство разработчиков javascript согласятся с тем, что это не добавляет читаемости (я думаю, что я неправильно читаю это, это доказывает).

Answer 2

Ваша проблема на самом деле хорошо описана в таких вопросах, как: How do I return the response from an asynchronous call?

Вызова window.alert(eventList); делает возвращение [object Object] потому, что вы назначили его eventList = this.

Функция getEventList() является асинхронной, поэтому ответ не доступен сразу. Вы можете сделать:

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

Но скорее взглянуть на ответ я уже упоминал выше, и увидеть how to use Promises in Angular.

Answer 3

Недурно Перо Hornshoj-Schierbeck и Мартин, который поставил меня в правильном направлении, это похоже на работу

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

Я надеюсь, что синтаксис является хорошей практикой, если не плохо бы рад получить любую консультацию