Объем обратного вызова с $ http при использовании $ scope

Question

Я использую $http, чтобы получить данные с моего сервера внутри моего контроллера, но он не работает так, как хотелось бы.

на мой взгляд, я использую FRON $scope.data данных, которые должны быть выведены из API, но когда я делаю это:

$http({method: 'GET',url: url}).then(function successCallback(response) { 
    $scope.data = response.xx.yy.map(function(item) { 
    return item.zz; 
    }); 
}, function errorCallback(response) { 
    // called asynchronously if an error occurs 
    // or server returns response with an error status. 
}); 

Это как $scope.data не существует даже на мой взгляд. консоль регистрирует ответ, но я не могу идти дальше.

Я попытался:

• создать глобальный вар вне моего контроллера и использовать его внутри моего обратного вызова, но это не работает, вероятно, потому, что это асинхронное я получаю неопределенный при вызове вне обратный вызов
• с использованием $scope.$parent
• Создание глобального var внутри моего обратного вызова data = reponse также не работает.

Я начинаю верить, что это связано с тем, что он асинхронный или, может быть, что-то еще о угловом, но не может понять, что/почему.

редактировать:

angular.module('MyApp').controller('PaCtrl', ['$scope', '$meteor','$timeout','$stateParams','$http',function ($scope, $meteor, $timeout,$stateParams,$http) { 
    var url = '/api/'+$stateParams.ID.toString() 
    $http({method: 'GET',url: url}).then(function successCallback(response) { 
    console.log(response)//work 
    $scope.friends = response.data.users[0].friends.map(function(item) { 
     return item.name; 
    }); 
    $scope.age = response.data.users[0].friends.map(function(item) { 
     return item.age; 
    }); 
    }, function errorCallback(response) { 
    // called asynchronously if an error occurs 
    // or server returns response with an error status. 
    }); 
    console.log($scope.friends) // undefined 
    console.log($scope.age) // undefined 
}]); 

HTML:

<div ng-controller="PaCtrl"> 
     <div class="col-lg-12"> 
     <canvas height="80" 
     id="line" class="chart chart-line" chart-data="data" chart-labels="labels" 
     chart-legend="false" chart-series="series" chart-click="onClick"></canvas> 
     </div> 
</div> 

маршруты:

angular.module('MyApp').config(function($stateProvider, $urlRouterProvider, $locationProvider) { 
    $locationProvider.html5Mode(true); 
    $urlRouterProvider.otherwise('/'); 
    $stateProvider 
     .state('users', { 
      url: '/users/:userID', 
      templateUrl: '/template.html' 
     }) 
    }); 

Answer 1

Попробуйте это:

$scope.data = {}; 

$http({method: 'GET',url: url}).then(function successCallback(response) { 
    $scope.data = response; 
}, function errorCallback(response) { 
    console.log('Error', response); 
}); 

HTML:

<div>{{data}}</div> 

Если он работает, добавьте остальную часть кода.

Answer 2

Что ваша структура данных

Вы можете получать массив из вашего API. Вот почему он отображается в журнале, но не в вашем представлении.

установка область с индексом 0 в вызове назад, как

Var data = response.xx. //etc. 
$scope.data = data[0]; 

То же самое Try случилось со мной раньше, надеюсь, что это помогает.

Обратите внимание на структуру приложения

Просто дополнительная вещь, вы должны сделать ваши HTTP звонки на заводе, а затем вызвать, что в контроллере. Сохраняет хорошее разделение проблем и делает код более удобочитаемым.