Question

我正在构建一个带有Angular前端的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");
        });
    };  
});

Answer 1

与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返回

将使用响应对象解析（请求成功）或拒绝（请求失败）的Promise。

响应对象具有以下属性：


数据 - {string|Object} - 使用转换函数转换的响应正文。

状态 - {number} - 响应的HTTP状态代码。

标题 - {function([headerName])} - 标题获取功能。

config - {Object} - 用于生成请求的配置对象。

statusText - {string} - 响应的HTTP状态文本。

xhrStatus - {string} - XMLHttpRequest的状态（complete，error，timeout或abort）。


-— AngularJS $http Service API Reference - Returns

Answer 2

在将数据仅设置为范围之后，您可能需要在处理程序中调用contractEnd，因为在ajax调用之后的处理程序发生在Angular之外。如果您使用Angular的$scope.apply()服务而不是$http，则无需手动处理。

Answer 3

您在AJAX调用中丢失了对$ scope的引用，因为它嵌套在多个JavaScript函数中。当使用JQuery AJAX调用时，你可以强制AngularJS通过调用$ scope来调用它。$ apply（）将再次运行摘要循环。

你真的应该使用$ http或$ q来利用JavaScript中的Promises。它们非常强大，可以简化JavaScript中异步操作的使用。

此链接可让您快速启动并运行：

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

要在控制器中加入$ http，您需要按照我的示例注入它。

＆＃13;

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);
        });
    }
}]);

＆＃13;

<!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>

＆＃13;

Answer 4

您需要先注入$ 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");
       }); 
    };
});

如何将AJAX调用的返回值绑定到Angular $ scope变量

4 个答案:

`$http`返回

如何将AJAX调用的返回值绑定到Angular $ scope变量

4 个答案:

$http返回

`$http`返回