Why angular data-binding not working with jquery ajax?

Question

I'm working on the angular tutorial project ---- angular-phonecat, and I got to the step-5.

Out of curiosity, I replace the original angular ajax method with jquery ajax method and left the rest untouched. After that I found I can get the right data from server but the data-binding never works.

Here is my code :

'use strict';

/* Controllers */

var phonecatApp = angular.module('phonecatApp', []);

phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', function ($scope, $http) {
    //$http.get('phones/phones.json').success(function(data) {
    //  $scope.phones = data;
    //});
    $.ajax({
        type: "GET",
        url: "phones/phones.json",
        contentType: "application/json",
        global: false,
        success: function (data) {
            $scope.phones = data;
        }
    });

    $scope.orderProp = 'age';
}]);

Why would this happen? Am I miss anything important?

`$http` is better integrated with the AngularJS digest cycle. The other benefit of `$http` is that it returns `$q` promises which are also better integrated with the digest cycle. — georgeawg, Jan 11 '16 at 10:21

Tarun Dugar · Accepted Answer · 2016-01-11T10:08:42.080

5

This is happening because jQuery's ajax function is not within the angular digest cycle. To fix this use $scope.$apply(); to run the cycle explicitly:

$scope.phones = data;
$scope.$apply();

Also, one piece of advice: try to use as less jQuery(use it for DOM manipulations mainly) as possible otherwise you won't be able to learn the 'angular' way.

edited Jan 11 '16 at 10:08

answered Jan 11 '16 at 10:07

Tarun Dugar

8,921
8
42
79

I would wrap the scope variable assignment inside of scope.apply, as outlined in this article: http://jimhoskins.com/2012/12/17/angularjs-and-apply.html. – Nat Wallbank Jan 11 '16 at 10:08
Thx a lot for your answer and suggestion. I'm pretty familiar with jquery but new to the angular, so cant stop thinking in jquery. – Halt Jan 11 '16 at 10:20
I think this link would be helpful: http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background – Tarun Dugar Jan 11 '16 at 10:21
It sure will be! Thx, again. – Halt Jan 11 '16 at 10:25
And may I ask why the other two respondent delete their answers? – Halt Jan 11 '16 at 10:29
To avoid duplicate answers. They were saying the same thing as me. – Tarun Dugar Jan 11 '16 at 10:30

score 0 · Answer 2 · answered Jan 11 '16 at 10:07

0

You would have to do $scope.$apply() to let angular know to run watch/digest cycle if code is run outside of angular.

$http is monitored by angular where as ajax is not.

answered Jan 11 '16 at 10:07

Chanthu

1,794
1
15
22

Why angular data-binding not working with jquery ajax?

2 Answers2

Linked