Question

我有一个控制器和角度视图。我通过ajax调用一个函数从服务器获取数据，然后将其加载到数组中，然后用ng-repeat绑定它，它加载数据但不会显示，直到我点击任何按钮。以下是代码图。

<table class="table table-striped" >
<thead>
    <tr>
        <th>Employee ID</th>
        <th>Name</th>
        <th>Designation</th>
        <th>Mobile No</th>
    </tr>
</thead>
<tbody>
    <tr data-ng-repeat="item in emplist">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.designation}}</td>
        <td>{{item.mobile}}</td>
    </tr>

</tbody></table>

控制器。

angular
.module('MyApp.ctrl.crud', [])
.controller('loginController',[
    '$scope',

    function ($scope) {

        $scope.emplist = [];

        $scope.load = function () {
            $.ajax({
                type: 'GET',
                contentType: 'application/json; charset=utf-8',
                url: '/Home/getList',
                success: function (data) {
                    $scope.emplist = data;
                    console.log($scope.emplist);
                }
            });
        }

        $scope.load();

Answer 1

你应该尝试使用角度为$ j的ajax服务。如果这样做，您将不需要显式执行任何操作，例如 $ scope.load（）。这可能会发生，因为只有在用户操作之后才会刷新范围，并且只有它具有新的范围值。但是在$ http的情况下，当获取响应并将其存储在$ scope中时，作用域会自动刷新。

或者，如果您不想将代码更改为$ http，那么在成功回调$ .ajax时，请执行$ scope。$ apply（），如下所示：

        success: function (data) {
            $scope.emplist = data;
            $scope.$apply();  // or $scope.$digest();
            console.log($scope.emplist);
        }

Answer 2

你正在超越棱角分明。您应该考虑实现$ http.get（而不是使用$ .ajax，看起来像jquery）。

如果你必须使用$ .ajax，那么你需要告诉angular to $ apply如下：

$scope.load = function () {
    $.ajax({
        type: 'GET',
        contentType: 'application/json; charset=utf-8',
        url: '/Home/getList',
        success: function (data) {
            $scope.emplist = data;
            $scope.$apply();
            console.log($scope.emplist);
        }
    });
}

$ http.get上的文档：https://docs.angularjs.org/api/ng/service/$http#get

申请文件：https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply

Answer 3

$ http是在这种情况下使用的正确工具，它具有角度双向数据绑定的意识，并且会在观察到的变量发生变化后自动消化范围。这是控制器的简化版本：

angular.module('MyApp.ctrl.crud', [])
.controller('loginController', ['$scope','$http', function($scope, $http) {
    $scope.emplist = [];
    $http.jsonp('/Home/getList').success(function(data){
        $scope.emplist = data;
    });
});

ng-repeat加载数据，但在我点击某个按钮之前不会显示

3 个答案: