Question

在我的角度控制器中，我定义了以下方法

$scope.searchListing = function() {
    $http({
        url: App.Url.to('listing/feed/21312')
    }).success(function(data, status, headers, config) {
        $scope.data = data;
    });
}

在视图中，$ scope.data.listing是循环的

<div class="item" ng-repeat="property in data.listings"><!-- stuff --></div>

使用ng-click触发searchListing，事情完美无缺。但是我有一个单独的API来处理对我的应用程序的API调用，它基于jQuery。在集成基于jQuery的API之后

$scope.searchListing = function() {
    App.Listing.getListing().done(function(data){
        $scope.data = data;
    });
}

API返回jqXHR对象，因此我可以在它们上调用promise方法。问题是即使将数据分配给$ scope.data，我的视图也不会更新。在ajax请求完成后，我访问了控制器以检查数据是否已分配

angular.element('[ng-controller=listingController]').scope().data

它确实显示了数据，为什么视图不会更新？

Answer 1

当Angular模型中的数据（$scope）发生变化时，Angular会识别出这一点并触发一个摘要循环，该循环会使用更新的数据重新呈现视图。

但是，当此数据更改发生在Angular视口之外的回调中时，Angular无法监视更改。这种情况发生在您的情况下，数据更改发生在jQuery承诺中，而jQuery承诺不是Angular的一部分。在这种情况下，您需要手动触发摘要循环，如下所示：

App.Listing.getListing().done(function(data){
        $scope.data = data;

        // make sure your app is not currently in a digest loop
        if (!$scope.$$phase)
            $scope.$apply(); // trigger digest loop
});

AngularJS数据绑定和jQuery承诺

1 个答案: