Как связать возврат из вызова AJAX с переменной Angular $ scope - PullRequest
Новая
       31

Как связать возврат из вызова AJAX с переменной Angular $ scope

0 голосов
/ 05 мая 2018

Я создаю приложение ASP.NET MVC с угловым интерфейсом. I. Успешно вызвать функцию Angular GetData() при загрузке страницы, и я проследил, чтобы подтвердить, что Home / DataRefresh возвращает данные в правильном формате.

Однако, когда я использую данные для заполнения таблицы, в представлении ничего не отображается, ошибок нет, все вызовы завершены, таблица просто пуста.

У меня есть подозрение, что это как-то связано с тем, как вы должны получить доступ к области Angular $ в неугловой функции, но я слишком новичок в angularjs, чтобы знать наверняка. Я прочитал всю документацию, которую смог найти безрезультатно.

РЕДАКТИРОВАТЬ: В соответствии с предложением, здесь содержится вызов $ http и Angular, в котором он содержится. 

app.controller("processModel", function ($scope) {
    $scope.sortType = 'SchedWk';
    $scope.sortReverse = false;

    $scope.GetData = function() {
        $scope.LoadData();
    };

    $scope.LoadData = function() {
        //$.ajax({
        //    type: "GET",
        //    url: 'Home/DataRefresh',
        //    dataType: "json",
        //    success: function (data) {
        //      $scope.data = data;
        //    }, 
        //    error: function (a, b, c) {
        //        alert("The jqXHR object:  " + a + " Error Type:  " + b + " Error Description:  " + c);
        //    }
        //});
        $http({
            method: "GET",
            url: '/Home/DataRefresh'
        }).then(function success(data) {
            $scope.data = data;
        }, function error(errResponse) {
            alert("y u break it tho");
        });
    };  
});

Ответы [ 4 ]

0 голосов
/ 05 мая 2018

В отличие от jQuery AJAX, служба $ http возвращает объект response, из которых data присоединено как свойство этого объекта: 

$http({
    method: "GET",
    url: '/Home/DataRefresh'
}).then(function success( ̶d̶a̶t̶a̶ response) {
    ̶$̶s̶c̶o̶p̶e̶.̶d̶a̶t̶a̶ ̶=̶ ̶d̶a̶t̶a̶;̶
    $scope.data = response.data;
}, function error(errResponse) {
    alert("y u break it tho");
});

Из документов:

$http Возвращает

A Обещание , которое будет разрешено (запрос успешно выполнен) или отклонено (запрос не выполнен) объектом ответа.

Объект ответа обладает следующими свойствами:

  • data - {string|Object} - Тело ответа, преобразованное с функциями преобразования.
  • status - {number} - HTTP-код состояния ответа.
  • заголовки - {function([headerName])} - Функция получения заголовка.
  • config - {Object} - Объект конфигурации, который использовался для генерации запроса.
  • statusText - {string} - текст статуса HTTP ответа.
  • xhrStatus - {string} - Состояние запроса XMLHttpRequest (complete, error, timeout или abort).

-— AngularJS $ http Справочник по API службы - возвращает .

0 голосов
/ 05 мая 2018

Вы потеряли ссылку на $ scope в своем вызове AJAX, потому что он вложен в несколько функций JavaScript. При использовании вызова JQuery AJAX вы можете заставить AngularJS забрать его, вызвав $ scope. $ Apply (), который снова запустит цикл дайджеста.

Вы действительно должны использовать $ http или $ q, чтобы воспользоваться Обещаниями в JavaScript. Они очень мощные и упрощают использование асинхронных операций в JavaScript.

Эта ссылка поможет вам быстро начать работу:

https://docs.angularjs.org/api/ng/service/$http

Чтобы включить $ http в свой контроллер, вам нужно добавить его, как в моем примере. 

var app = angular.module('app', []);

app.controller('postController', ['$scope', '$http', function($scope, $http){
    $scope.data = 'empty';
    $scope.runAJAX = function(){
  $http.get('https://jsonplaceholder.typicode.com/posts').then(function(response){
            $scope.data = response.data;
        }).catch(function(error){
            console.log(error);
        });
    }
}]);
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body ng-controller="postController">
    <div>
        {{data}}
    </div>
    <div>
        <input type="button" value="run AJAX" ng-click="runAJAX()"/>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script src="script.js"></script>
</body>
</html>
0 голосов
/ 05 мая 2018

Сначала нужно ввести службу $ http: 

app.controller("processModel", function($scope, $http) { 
    $scope.sortType = 'SchedWk'; 
    $scope.sortReverse = false; 
    $scope.GetData = function() { 
        $scope.LoadData(); 
    }; 
    $scope.LoadData = function() { 
       $http({ 
            method: "GET", 
            url: '/HomeDataRefresh' 
       }).then(function success(data) { 
            $scope.data = data; 
       }, function error(errResponse) { 
            alert("y u break it tho");
       }); 
    };
});
0 голосов
/ 05 мая 2018

Возможно, вам нужно вызвать $scope.apply() в обработчике после установки данных только для области, потому что этот обработчик после вызова ajax происходит вне Angular. Если бы вы использовали $http сервис Angular вместо $.ajax, вам не пришлось бы обрабатывать это вручную.

...