0

我对 AngularJs 完全陌生，我有这个我不明白的问题。我有两种方法。第一个从 web 服务中获取一些数据并放入范围内定义的变量中。但是当我想在第二种方法中使用该变量时，它是未定义的。有人可以帮助我理解为什么会发生这种情况并提供解决方案吗？

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

4 回答 4

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();
于 2013-05-03T10:13:50.893 回答
2

使用 $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; });
});
于 2013-05-03T10:59:14.713 回答
1

不能保证调用getAll之前已经完成getCategories，因为它是一个异步请求。所以如果你想顺序调用and getAll，getCategories你应该getCategories在. 您还可以寻找一种更简洁的链接异步回调的方法（我假设您正在使用 jQuery，因为您正在调用）。successgetAllpromises$.ajax

...
<snipped some code>

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

（如果您使用的是 jQuery 承诺）

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

不过，两者都不是非常“Angularish”，因此您可能希望查看一些提供的服务来处理 http/rest 资源而不是使用 jQuery。

于 2013-05-03T10:08:45.393 回答
1

你为什么在 Angular 中使用 jQuery ajax 请求？如果您编写 jQuery 样式代码并将其包装成角度，那么您将度过一段糟糕的时光......

这是一个角度化的版本：

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();
}
于 2013-05-03T10:19:14.773 回答