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

本文关键字：一个 函数 调用 使用 Web API AngularJS | 更新日期: 2023-09-27 18:35:06

In an ASP.NET MVC with WebApi using AngularJS.

我有这种情况：

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

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

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

有没有办法在函数"加载我的数据"时调用下面标记为"XXXXX"的代码

视图如下所示： 

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

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

请尝试以下操作

请更改代码 

$scope.applyTable();

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

 setTimeout(function () {
         $scope.applyTable();
    }, 300);
您可以在

函数内部调用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();

使用 $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循环实际上没有任何意义。你到底想用它完成什么？

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

我不知道

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

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

$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);

相关文章：