AngularJS данных и JQuery обещает

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> 

searchListing запускается с помощью ng- нажмите, и все работает отлично. Однако у меня есть отдельный API, который обрабатывает вызовы API для моего приложения, и он основан на jQuery. После интегрирования моего на основе JQuery API

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

API-интерфейс возвращает jqXHR объекты, так что я могу назвать методы обещания на них. Проблема даже в том, что данные привязаны к $ scope.data, мое представление не обновляется. После того, как Ajax запрос завершен, я получил доступ к контроллеру, чтобы проверить, если данные получили назначены

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

И это действительно показывают данные, почему не вид обновляется?

Answer 1

Когда данные в Угловой модели ($scope), изменения, Угловые распознают это и запускают цикл дайджеста, который повторно отображает представление с обновленными данными.

Однако, когда это изменение данных происходит в обратном вызове, который находится вне окна просмотра Angular, Angular не может контролировать изменение. Это происходит в вашем случае, когда изменение данных происходит в обещании 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 
});