Question

在使用AngularJS的WebApi的ASP.NET MVC中。

我遇到这种情况：

从菜单中，我调用MVC操作
我渲染一个视图。在这个视图中，我将.js文件包含在angularJS代码中，在我定义的函数代码中。我在定义后直接调用这个函数。
使用返回的数据创建
我应用DataTable（datatables.net）来生成网格。

从第1点到第3点没问题，我得到了正确的行为。

问题是我在获取数据之前应用了数据表函数。我该如何解决这个问题？

当函数'loadMyData'

视图如下：

@section scripts
{
    <script src="@Url.Content("~/MyScriptsBinding/SampleIndexViewModel.js")" type="text/javascript"></script>
}

<div data-ng-controller="SampleIndexViewModel">
    <table class="table table-striped table-hover" id="sample_1">
        <thead>
            <tr>
                <th>Column1</th>
                <th>Column2</th>
            </tr>
        </thead>
        <tbody ng-repeat="item in itemList">
            <tr style="vertical-align: central">
                <td>{{ item.Field1 }}</td>
                <td>{{ item.Field2 }}</td>
            </tr>
        </tbody>
    </table>
</div>

SampleIndexViewModel.js：

appMainModule.controller("SampleIndexViewModel", function ($scope, $http, viewModelHelper) {
    $scope.itemList = [];
    $scope.loadMyData = function () {
        viewModelHelper.apiGet('api/mytest/list', null,
            function (result) {
                for (var i = 0; i < result.data.length; i++) {
                    $scope.customers = result.data;
                }
            });
    }

    $scope.applyTable = function () {
        $('#sample_1').DataTable();
    }
    $scope.loadMyData();
    $scope.applyTable(); // XXXXX
});

Answer 1

请尝试以下

请更改代码

$scope.applyTable();

请使用下面的代码，而不是使用上面的代码。

 setTimeout(function () {
         $scope.applyTable();
    }, 300);

Answer 2

您可以在applyTable函数内调用loadMyData函数。

$scope.applyTable = function () {
        $('#sample_1').DataTable();
    }

$scope.loadMyData = function () {
        viewModelHelper.apiGet('api/mytest/list', null,
            function (result) {
                for (var i = 0; i < result.data.length; i++) {
                    $scope.customers = result.data;
                }
                $scope.applyTable(); 
            });
    } 

$scope.loadMyData();

Answer 3

使用$ http服务，您可以使用promise在成功进行http调用后执行一段代码。查看此页面：https://docs.angularjs.org/api/ng/service/$http

具体来说，您想要做这样的事情：

$scope.itemList = [];

$scope.applyTable = function () {
  $('#sample_1').DataTable();
}

$http.get('api/mytest/list').
  success(function(data, status, headers, config) {
    $scope.customers = data;
    $scope.applyTable();
  })

当然，这是假设您正确设置了数据表。此外，您的for循环并没有任何意义。你究竟想用它完成什么？

我建议使用angular-datatables模块（http://l-lin.github.io/angular-datatables/#/welcome），因为它在jQuery数据表之上添加了一个有用的Angular图层。

Answer 4

我不知道viewModelHelper.apiGet是如何实现的，但是如果它返回了一个承诺你就可以做到：

$scope.loadMyData = function () {
    return viewModelHelper.apiGet('api/mytest/list').then(function (result) {
            for (var i = 0; i < result.data.length; i++) {
                $scope.customers = result.data;
            }
    });
}

$scope.applyTable = function () {
    $('#sample_1').DataTable();
}

$scope.loadMyData().then($scope.applyTable);

如果它没有返回承诺，您可以使用loadMyData服务始终$q这样做：

$scope.loadMyData = function () {
    return $q(function(resolve){
            viewModelHelper.apiGet('api/mytest/list', null, 
                function (result) {
                    for (var i = 0; i < result.data.length; i++) {
                        $scope.customers = result.data;
                    }
                    resolve();
                }
            );
        });
}

然后你只是把电话联系起来：

$scope.loadMyData().then($scope.applyTable);

使用AngularJS和Web Api一个接一个地调用2个函数

4 个答案: