Как получить доступ к данным из $hhtp.get() в angularJS?

Question

[alex_adept]

Здравствуйте. Суть проблемы:

<div class="ng-scope" ng-init="init_func()" ng-controller="testCtrl">

var testApp = angular.module('testApp', []);
testApp.controller("testCtrl", ['$http', function($http){
        var store = this;
        store.init_func = function(){
                $http.get('/get_json_data')
                        .success(function(data){
                                store.my_data = data;
                        })        
        };
        console.log(store);
        console.log(store.my_data);
}]);

Выводв консоль:

Object { init_func=function()}
undefined

В варианте со scope аналогиченая ситуация:

var testApp = angular.module('testApp', []);
testApp.controller("testCtrl", ['$scope', '$http', function($scope, $http){
        $scope.init_func = function(){
                $http.get('/get_json_data')
                        .success(function(data){
                                $scope.my_data = data;
                        })        
        };
        console.log($scope);
        console.log($scope.my_data);
}]);

Вывод:

l { $$listeners={...}, $$listenerCount={...}, $id=2, ещё...}
undefined

Данные получает корректно, со страницы доступ есть. Console.log($scope.my_data); внутри колбека отрабатывает правильно.

Прошу объяснить что я не понимаю, и каким образом получить доступ к данным, полученным через $http.get() из контроллера?

Answer 1

[Dmitry Demin]

Вы, видимо, не совсем правильно поняли принцип работы ajax запросов.
Синхронные запросы - зло для производительности, посему в Angular используют механизм, похожий на Promises.
Соответственно, сразу данные не придут и в консоль не будет выведено ничего корректного.

Суть в том, что за запрос уходит определенное время и callback вызывается только по его завершении.

Грубо говоря, внутри callback'а, после проведенных операций, вам нужно вызвать scope.$apply(), чтобы применить изменения модели и уже тогда можете быть уверены, что данные пришли.

Comments

[DarthJS]

А можешь еще плыз подсказать как поступить в такой же ситуации, только с использованием сервиса?
.factory('facName', function($http){
var base = {};
return $http.get('url').then(function(data){ base = data; })
.controller('Ctrl', function($scope, facName){
консоль возвращает промис. Как воспользоваться данными?
буду очень признателен :)

Answer 2

[Булат Курбангалиев]

Вам нужно вызвать store.init_func.
Попробуйте так:

var testApp = angular.module('testApp', []);
testApp.controller("testCtrl", ['$http', function($http){
        var store = this;
        store.init_func = function(){
                $http.get('/get_json_data')
                        .success(function(data){
                                store.my_data = data;
                        })        
        };
        store.init_func();
        console.log(store);
        console.log(store.my_data);
}]);

Comments

[alex_adept]

Я прошу прощения, не приложил html часть. init_func() вызывается в ng-init. При попытке вызвать напрямую, как Вы предложили тоже ничего не поменялось. Вопрос поправил.

Answer 3

[Сергей Гаврилов]

$scope.$watch 'my_data', (data) ->
    console.log($scope)
    console.log($scope.my_data)