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
– georgeawg, Commented Jan 11, 2016 at 10:21

Tarun Dugar · Accepted Answer · 2016-01-11 10:08:42Z

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, 2016 at 10:08

answered Jan 11, 2016 at 10:07

Tarun Dugar

8,9938 gold badges50 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Nat Wallbank Over a year ago

I would wrap the scope variable assignment inside of scope.apply, as outlined in this article: jimhoskins.com/2012/12/17/angularjs-and-apply.html.

Halt Over a year ago

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.

Tarun Dugar Over a year ago

I think this link would be helpful: stackoverflow.com/questions/14994391/…

Halt Over a year ago

It sure will be! Thx, again.

Halt Over a year ago

And may I ask why the other two respondent delete their answers?

|

Chanthu · Accepted Answer · 2016-01-11 10:07:12Z

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, 2016 at 10:07

Chanthu

1,7941 gold badge15 silver badges23 bronze badges

Collectives™ on Stack Overflow

Why angular data-binding not working with jquery ajax?

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related