使用 AngularJS 和 Web Api 依次调用 2 个函数答案

【问题标题】：Call 2 functions one after the other using AngularJS and Web Api使用 AngularJS 和 Web Api 依次调用 2 个函数
【发布时间】：2015-02-22 07:35:10
【问题描述】：

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

我有这种情况：

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

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

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

有没有办法在函数'loadMyData'时调用下面标有“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
});

【问题讨论】：

请注意，您在tbody 上使用ng-repeat，这会导致重复tbody 而不仅仅是行。您确定要为每一行重复整个 tbody 吗？

标签： c# .net asp.net-mvc angularjs asp.net-web-api

【解决方案1】：

请尝试如下

请修改代码

$scope.applyTable();

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

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

【讨论】：

我试过了，我可以看到数据表应用到表上，后面还有数据。

【解决方案2】：

你可以在loadMyData函数内部调用applyTable函数。

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

【讨论】：

那么你应该在你的问题中提到这个问题

【解决方案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 层。

【讨论】：

【解决方案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);

如果它没有返回一个承诺，你总是可以通过使用 $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);

【讨论】：