Угловая двухсторонняя привязка данных, обновление модели от Ajax Call

Question

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

Получение значения модели из представления (html) в файл контроллера (js) Работает нормально через var x = $scope.titlelangnative, но когда я вызываю ajax url и получаю данные, а затем присваиваю значение заголовочной модели с помощью $scope.titlelangnative = json.data, оно не обновляетсяпросмотреть сразу, и когда я нажимаю на один из объектов 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 $ http ... Это решит проблему ...

причина, по которой $.ajax не работает, заключается в том, что, скажем, запрос занимает 1 секунду, и, следовательно, модель меняется через 1 секунду, а angularjs не меняет представление, потому что вы не сказали обновить его ... (Таким образом, представление изменяетсякогда вы щелкаете по нему, потому что, щелкая по нему, вы говорите angularjs обновить представление, запустив событие dom)

Чтобы это исправить, вам нужно вызвать $ scope. $ apply () обновить представление после завершения запроса ... Что-то вроде этого

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

Но когда вы используете $http угловые огни $scope.$apply() самостоятельно ...

Такрекомендуется использовать $http