Angularjs 角度双向数据绑定，从Ajax调用更新模型

为什么文本框模型值在ajax响应后不更新

嗯。。。首先，不要使用jQuery的

$.ajax

。。。用angularjs的。。。这将解决问题

$.ajax

不起作用的原因是，假设请求需要1秒，因此模型会在1秒后更改，angularjs不会更改视图，因为您没有告诉它更新它。。。（因此，当您单击视图时，视图会发生变化，因为单击它是在告诉angularjs通过触发dom事件来更新视图）

要解决此问题，您必须在请求完成后调用以更新视图。。。像这样的

angularFormsApp.controller('efController',
    ["$scope", "$window", "$routeParams",
        function efController($scope, $window, $routeParams) {
            var siteRoot = dnn.getVar("sf_siteRoot", "/");
            $.ajax({
                type: 'GET',
                url: siteRoot + "DesktopModules/MVC/Ycon/Item/GetDraft",
                beforeSend: sf.setModuleHeaders,
                success: function (data, status, xhr) {
                    var result = JSON.parse(data);
                        //this part not update text box in html until i click on it
                        $scope.titlelangnative = result.title_langNative;
                    },
                    error: function (data, status, xhr) {
                        $("#gotobankloader").addClass('hidden');
                        alert('error');
                    }
                });

但是，当您单独使用

$http

时，

$scope.$apply（）

因此建议使用

$http

angularFormsApp.controller('efController',
    ["$scope", "$window", "$routeParams",
        function efController($scope, $window, $routeParams) {
            var siteRoot = dnn.getVar("sf_siteRoot", "/");
            $.ajax({
                type: 'GET',
                url: siteRoot + "DesktopModules/MVC/Ycon/Item/GetDraft",
                beforeSend: sf.setModuleHeaders,
                success: function (data, status, xhr) {
                    var result = JSON.parse(data);
                        //this part not update text box in html until i click on it
                        $scope.titlelangnative = result.title_langNative;
                    },
                    error: function (data, status, xhr) {
                        $("#gotobankloader").addClass('hidden');
                        alert('error');
                    }
                });

$.ajax({
  ....
  success: function(){
    ...
    $scope.$apply();
  }
})