2

我是 AngularJS 的新手,所以这实际上可能指向一些我还没有完全理解的核心概念。我正在尝试使用$q&promise对象将“远程数据”视为本地数据。直到未获取远程数据时,promise对象才解析,但一旦解析,我希望视图中的所有相关数据绑定都得到更新。然而,下面的方法会导致一个无限循环,在这个循环中remote_total被重复调用,即使之前的调用remote_total导致了一个已解析的 promise 对象。

这是我的观点

<div ng-controller="MyController">
  {{ remote_total() }}
</div>

这是控制器的相关片段:

function MyController($scope, $q, $http) {
  $scope.remote_total = function() {
    var def = $q.defer();
    $http.get('/my/remote/service.json').success(function(data) {
      def.resolve(data);
    });
    return def.promise;
  }
}

首先,如果有人能向我解释为什么这会进入无限循环,那就太好了。其次,实现我想要做的事情的最佳方式是什么?

4

2 回答 2

5

注意:有关 Angular 1.2+,请参阅下面的更新

AngularJS 的承诺(提供)实际上很有趣$q,它们被 AngularJS 识别。还有一个是它们是可链接的!

所以在你的代码中你可以做

$scope.remote_total = $http.get('/my/remote/service.json').then(function(data) {
  return data;
});

并且只是查看<div>{{remote total}}</div>(注意:不是功能,只是价值)。

AngularJS 会自动识别它的 promise,解析 $http.get promise,然后链接到你的函数中,并将结果值放入模板中。

就这样 :)

更新:默认情况下,AngularJS 1.2 中禁用了 Promise 的自动解包,并将在 1.3 中完全删除。

有效的代码:

$http.get('/my/remote/service.json').then(function(response) {
  $scope.remote_total = response.data;
});
于 2013-01-21T23:06:56.567 回答
3

Angular 进行脏检查以实现 2 路绑定。在每个周期中,它存储被监视属性的先前值并将其与新值进行比较。如果该属性是一个函数,则调用它并比较结果。

您确实放置了一个要监视的函数,并且在每个周期中,都会调用您的函数,从而导致 http 请求。

您想要做的是自己创建承诺并将该承诺附加到观看范围(或显示在视图中)。

此外, $http 服务已经返回了一个承诺,您不需要创建另一个承诺。

function MyController($scope, $q, $http) {
  $scope.getRemoteTotal = function() {
    var def = $http.get('/my/remote/service.json').then(function(response) {
      $scope.remoteTotal = response.data;
    });
  }
  $scope.getRemoteTotal();
}

.

<div ng-controller="MyController">
  {{ remoteTotal }}
</div>
于 2013-01-21T06:43:16.593 回答