在 angular 数据表指令的 promise then 方法中分配 $scope 变量？

Question

我不确定是什么问题，但似乎在定义我的 $scope 之前初始化了数据表指令。而且，似乎变量设置了两次。

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

如果我使用静态数据（不是来自服务器）并将 $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>

Answer 1

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

该指令不会等待请求完成，因为请求本质上是异步的。如果您希望在请求完成时更新指令变量，则必须在 link 中的 $scope.variables 上设置一个 $watch（如果您想观察多个变量，则设置 $watchGroup）功能如下：

link: function(scope, element, attrs) {
    scope.$watch('dtOptions', function(newval, oldval) {
        //your directive code involving scope variables here.
    })
}

Answer 2

看来我必须调用我的服务器 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;
            });

在 angular 数据表指令的 promise then 方法中分配 $scope 变量？

Assign $scope variables inside a promise then method for angular datatables directive?

datatables

angularjs

angular-datatables