jquery - 为什么 Angular 数据绑定(bind)不能与 jquery ajax 一起使用？

Question

我正在开发 Angular 教程项目 ---- Angular-phonecat，并且已经完成了第 5 步。

出于好奇，我将原来的 Angular ajax 方法替换为 jquery ajax 方法，其余部分保持不变。 之后我发现我可以从服务器获取正确的数据，但数据绑定(bind)永远无法工作。

这是我的代码:

'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';
}]);

为什么会发生这种情况？我错过了什么重要的事情吗？

Answer 1

发生这种情况是因为 jQuery 的 ajax 函数不在 Angular 摘要周期内。要解决此问题，请使用 $scope.$apply(); 显式运行循环:

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

另外，还有一个建议:尽量少用 jQuery(主要用于 DOM 操作)，否则你将无法学习“Angular ”方式。