AngularJS - переменная области не обновляется по методу

Question

Я совершенно не знаком с AngularJs, и у меня есть эта проблема, которую я не понимаю. У меня есть два метода. Первый принимает некоторые данные из веб-службы и помещает в переменную, определенную в области. Но когда я хочу использовать эту переменную во втором методе, она не определена. Может ли кто-нибудь помочь мне понять, почему это происходит и обеспечить решение?

var myApp= angular.module("myApp", []); 

myApp.controller("myAppController", 
function($scope) { 
$scope.getAll = function(){ 
    $.ajax({ 
     type: "GET", 
     dataType: "jsonp", 
     contentType: "application/json; charset=utf-8", 
     url: ..something..., 
     success: function (parameters) { 
      $scope.profiles = angular.copy(parameters); <-- correct data is returned 
      $scope.$apply(); 
     }, 
     error: function() { 
      alert("Error calling the web service."); 
     } 
    }); 
} 
$scope.getCategories = function(){ 
    var all = $scope.profiles; <-- At this point profiles is empty 
    ... 
} 
    $scope.getAll(); 
    $scope.getCategories(); 
} 

Answer 1

Там нет никакой гарантии, что getAll была завершена до getCategories вызывается, так как асинхронный запрос. Поэтому, если вы хотите последовательно вызывать getAll и getCategories, вы должны вызывать getCategories внутри обратного вызова successgetAll. Вы также можете изучить promises для более аккуратного способа связывания асинхронных обратных вызовов (я предполагаю, что вы используете jQuery, так как вы вызываете $.ajax).

... 
<snipped some code> 

success: function(parameters) { 
    // snipped more code 
    $scope.getCategories(); 
} 

(и если вы используете JQuery обещания)

$.ajax(ajaxCallOneOpts).then($.ajax(ajaxCallTwoOpts)); 

Ни очень «Angularish», хотя, так что вы можете захотеть взглянуть на некоторые из предоставляемых услуг для работы с HTTP/отдых вместо использования jQuery.

Answer 2

Когда вы звоните getCategories(), getAll() еще не окончен, поэтому профили пуст. Существует несколько способов решить эту проблему. Лучшим способом было бы использовать обещания встроенного сервиса $http.

Если вы предпочитаете использовать jQuery, вы можете добавить наблюдателя в переменную profiles и только тогда, когда она заполнена, запустите getCategories().

Что-то, как это должно работать:

$scope.getAll = function(){ 
    $.ajax({ 
     type: "GET", 
     dataType: "jsonp", 
     contentType: "application/json; charset=utf-8", 
     url: ..something..., 
     success: function (parameters) { 
      $scope.profiles = angular.copy(parameters); <-- correct data is returned 
      $scope.$apply(); 
     }, 
     error: function() { 
      alert("Error calling the web service."); 
     } 
    }); 
} 

$scope.getCategories = function(){ 
    var all = $scope.profiles; 

} 

// Wait for the profiles to be loaded 
$scope.watch('profiles', function() { 
    $scope.getCategories(); 
} 

$scope.getAll(); 

Answer 3

Почему вы используете запрос Ajax JQuery в угловой? Если вы пишете код в стиле JQuery и оберните его угловатым, вы будете иметь плохое время ...

Вот angularised версия:

myApp.controller("myAppController", 
function($scope, $q, $http) { 

    $scope.getAll = function(){ 
    var deferred = $q.defer(); 
    $scope.profiles = deferred.promise; 
    $http.jsonp('your url').then(function(data) { 
     deferred.resolve(data); 
    }); 
    }); 

    $scope.getCategories = function(){ 
    $q.when($scope.profiles).then(function(profiles) { 
     ... <-- At this point profiles is populated 
    });  
    } 

    $scope.getAll(); 
    $scope.getCategories(); 
} 

Answer 4

Используйте $ службу HTTP и обещание:

$scope.profiles = $http.jsonp(url).then(function(r){ return r.data; }); 
$scope.categories = $scope.profiles.then(function(profiles) { 
    var params = { }; // build url params 
    return $http.jsonp(url, { params: params }).then(function(r){ return r.data; }); 
});