为什么要角数据绑定不使用jQuery AJAX工作吗？ [英] Why angular data-binding not working with jquery ajax?

问题描述

我工作的角度教程项目----角phonecat，我到了步-5。

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

出于好奇，我替换使用jQuery AJAX方法的原始角AJAX方法，离开了其余不变。
在那之后，我发现我可以从服务器上获取正确的数据，但数据绑定从不工作。

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.

下面是我的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?

推荐答案

这是发生，因为jQuery的AJAX功能不是在角消化周期。为了解决这个问题使用 $ $范围适用于（）; 来明确运行周期：

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();

此外，还有一个忠告：尽量少为jQuery的使用（使用它的DOM操作为主）越好，否则你将无法学习'角'的方式

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.

这篇关于为什么要角数据绑定不使用jQuery AJAX工作吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！