0

我不确定问题是什么，但似乎 datatables 指令在我的 $scope 定义之前被初始化。更重要的是，变量似乎被设置了两次。

我有一个userService从我的服务器检索列定义和数据的。该getUserList()方法返回一个承诺。我使用 then() 方法来设置将由 datatables 指令使用的 $scope 变量。似乎该指令在请求完成之前请求变量。此外，变量似乎设置了两次，因为在 Chrome 的开发控制台中，我看到了两次“测试”日志。

如果我使用静态数据（不是来自服务器）并将 $scope 变量放在getUserList()承诺之外，它可以正常工作。

    $scope.indexList = function () {
                userService.getUserList().then(function (data) {


                    $scope.dtOptions = DTOptionsBuilder.fromFnPromise(function () {
                        console.log("test"); 
                        var deferred = $q.defer();
                        deferred.resolve(data.Data);
                        return deferred.promise;
                    });
                    $scope.dtColumns = [];

                    angular.forEach(data.DataTablesColumns, function (i, v) {
                        $scope.dtColumns.push(DTColumnBuilder.newColumn(i.Id)
                                              .withTitle(i.DisplayName)
                                              .renderWith(actionsHtml));
                    });

                });
            }

这就是我设置数据表指令的方式：

    <div ng-init="indexList()">
        <table datatable="" dt-options="dtOptions" dt-columns="dtColumns"class="row-border hover"></table>
    </div>
4

2 回答 2

1

页面加载后立即执行指令代码。而且由于您的 $scope 变量是在承诺中定义的，因此它们在页面加载时不可用。

该指令不会等待请求完成，因为请求本质上是异步的。如果您希望在请求完成时更新指令变量，您必须$watch在链接函数中的 $scope.variables 上设置一个（或 $watchGroup，如果您想监视多个变量），如下所示：

link: function(scope, element, attrs) {
    scope.$watch('dtOptions', function(newval, oldval) {
        //your directive code involving scope variables here.
    })
}
于 2015-10-29T13:01:35.527 回答
0

看来我必须对我的服务器进行 2 次调用才能完成我想要做的事情。这可行，但我觉得应该有一种方法可以对服务器进行一次调用并取回整个结果。在阅读了一些选项和列构建器之后，可以做出承诺。

$scope.indexList = function () {


            $scope.dtOptions = DTOptionsBuilder.fromFnPromise(function () {
                return userService.getUserList(ngRequestGlobabls.context.organization).then(function(data) {
                    return data.Data;
                });
            });


            $scope.dtColumns = userService.getUserList(ngRequestGlobabls.context.organization).then(function (data) {
                columns = [];
                angular.forEach(data.DataTablesColumns, function(i, v) {
                    columns.push(DTColumnBuilder.newColumn(i.Id).withTitle(i.DisplayName).renderWith(actionsHtml));
                });

                return columns;
            });
于 2015-10-29T14:04:50.157 回答