Question

 <input ng-model="titlelangnative" id="titlelangnative" name="titlelangnative" type="text" />

获取模型从视图（html）到控制器（js）文件的值通过var x = $scope.titlelangnative正常工作但是当我调用ajax url并获取数据然后通过$scope.titlelangnative = json.data将值赋给titlelangnative模型时它不会立即更新视图，当我点击绑定的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');
                    }
                });

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

Answer 1

嗯......首先不要使用jQuery的$.ajax ...而是使用angularjs＆＃39; s $http ......这将解决问题。 ..

$.ajax之所以不起作用，原因是让我们说请求需要1秒，因此模型会在1秒后发生变化而且angularjs不会改变视图，因为你没有＆＃39 ; t告诉更新它...（因此当您单击它时视图会发生变化，因为通过单击它会告诉angularjs通过触发dom事件来更新视图）

要解决此问题，您必须在请求完成后调用$scope.$apply()更新视图...这样的事情

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

但是当你使用$http角火$scope.$apply()时，它自己...

因此建议使用$http

Angular双向DataBinding，来自Ajax Call的更新模型

1 个答案: