Question

我在角度1.2项目中设置了datatables.js表。我希望$ http.get（...）调用中的值是表格每行的一个单元格中显示的值。

我知道$ http会返回一个promise，但我无法弄清楚如何更改代码，以便解析后的promise的值是render函数返回的值，以便数据＆amp;不是承诺是表中显示的内容。

更新：我是否需要在创建表之前预取数据？＆lt; - 这就是答案！请参阅选定的答案以便实施。你不能使用像Angulars $ http之类的东西来调用表中的每一行，因为没有机会在渲染函数中返回已解析的promises数据。

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

以下是我正在尝试做的事情：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

我认为你的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继承该属性。

Answer 2

你有没有看过Angular-datatables？

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

ban

返回datatables.js列的render函数中angular $ http.get的值

2 个答案: