Return 来自 angular $http.get 的值在 datatables.js 列的呈现函数中

Question

我在 angular 1.2 项目中设置了 datatables.js table。我希望来自 $http.get(...) 调用的值显示在 table.

每行的一个单元格中

我知道 $http return 是一个 promise，但我不知道如何更改代码以使已解析的 promise 的值是 return 渲染器编辑的值函数，以便数据而不是承诺显示在 table.

中

更新：我需要在创建 table 之前预取数据吗？ <-- 这就是答案！ 请参阅所选答案以进行实施。您不能使用 Angulars $http 之类的方法调用 table 中的每一行，因为没有机会 return 渲染函数中已解决的承诺数据。

除非有必要，否则我不会寻找 hack。我想用一个已知的模式来解决这个问题。

这是我正在尝试做的 fiddle：jsfiddle example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div ng-app="salutationApp">
        <div ng-controller="salutationReportController">
            <table id="salutationTable" />
            <button type="button" ng-click="init()">
                Create Table
            </button>
        </div>
    </div>
    <script src="https://cdn.datatables.net/t/dt/jq-2.2.0,dt-1.10.11/datatables.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.js"></script>
    <script src="app.js"></script>
</body>
</html>

var salutationApp = angular.module("salutationApp", []);
salutationApp.controller("salutationReportController", ["$http", "$scope", function ($http, $scope) {
    var getSalutationLink = function (data) {
        var url = 'http://jsonplaceholder.typicode.com/posts/1';
        return $http({
            method: 'GET',
            url: url,
            params: data
        });
    };

    var init = function () {
        var salutationDataSource = [
          {
              salutationDataField: "hello!"
          },
          {
              salutationDataField: "good morning!"
          },
          {
              salutationDataField: "greeetings!"
          }
        ];

        $("#salutationTable").DataTable({
            "bDestroy": true,
            data: salutationDataSource,
            columns: [{
                title: "Salutation",
                data: "salutationDataField",
                render: function (cellData, type, fullRowData, meta) {
                    //I want this to return a some data from the server
                    var retVal = getSalutationLink({
                        salutation: cellData,
                    });

                    return retVal; // I know this is a promise... but I need to return the value of the resolved promise. I want the data from the web server to be the return value. This is where I'm stuck.
                }
            }]
        });

    };

    $scope.init = function () {
        init();
    };
}]);

谢谢！

Answer 1

您是否查看过 Angular-数据表？

http://l-lin.github.io/angular-datatables/#/withPromise

angular.module('showcase.withPromise', ['datatables', 'ngResource']).controller('WithPromiseCtrl', WithPromiseCtrl);

   function WithPromiseCtrl(DTOptionsBuilder, DTColumnBuilder, $resource) {
   var vm = this;
       vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
          return $resource('data.json').query().$promise;
   }).withPaginationType('full_numbers');

    vm.dtColumns = [
       DTColumnBuilder.newColumn('id').withTitle('ID'),
       DTColumnBuilder.newColumn('firstName').withTitle('First name'),
       DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
  ];
}

Answer 2

我认为您的 ng-controller 甚至行不通？您不要将其设置为全局变量名称，它必须在 angular.

内声明

html

<div ng-controller="SalutationReportController">
    <div id="salutationTable"></div>
</div>

js

//this shouldn't work
var SalutationReportController = function() { /* blah */ }

//this would work
angular
    .module('app')
    .controller('SalutationReportController', ['$http', '$scope', function() {
        $http.get('/api/foobar').then(function(res) {
            //now the data you got from the promise is publicly available to your child directive
            $scope.tabledata = res.data;
        });
    }])

在指令代码的某处，您需要添加正确的作用域属性，并让指令根据其 api.

继承属性

Return 来自 angular $http.get 的值在 datatables.js 列的呈现函数中

Return a value from angular $http.get in datatables.js column's render function

javascript

datatables

promise

angularjs

angular-promise