AngularJS和Datatable - 在重新渲染单元格值时编译html

Question

我正在使用angularjs和数据词来构建网格。我有以下JavaScript代码

演示： http://plnkr.co/edit/qj7vr1bec5rrxphw2q?p=peview

datatable_config = {
     "bJQueryUI": true,
     "bProcessing": true,
     "bDeferRender": true,
     "sDom": "Rlfrtip",
     "aaData": [null]
};
angular.forEach(columns, function(column, key){
    datatable_config.aoColumns.push({
        "sTitle": column.displayName, 
        "mData": function(source, type, value){
            var cell_value = (source[column.field]) ? source[column.field] : '', rendered_cell;
            if(column.field == 'something'){
                rendered_cell = $compile('<span>{{$root.value}}</span>')($scope);
                 /* For this column, I am not getting the span element with the evaluated rootscope instead, it says [object object] */
            } else {
                rendered_cell = cell_value;
            }
            return rendered_cell;
        }
    });
});

当我编译HTML时，它会显示[object object]。我遇到问题，我们需要在绑定后将其编译，就像此element.html(value); $compile(element.contents())(scope);一样。但是上述代码不可能。有任何解决方案或想法吗？

感谢Advace。

Answer 1

试图编译"被渲染的dom"也有类似的问题。几个小时后，尽管我的要求大不相同，但终于使它起作用了。我还需要绑定指令，您需要使用$ compile（）。

对于您的用例，使用$ parse

// parse the "value" attribute value into a function
var parseFn = $parse(value);
// "parseFn" is a function that can be invoked to get the expression's value 
// providing a scope
var currVal = parseFn($root);
// return updated markup
return '<span>'+ currVal +'</span>';

Answer 2

我认为这有点迟了，但是我对此问题有更简单的解决方案，但我仍然建议您使用Angular-datatable指令。

data_table.directive('dataTable', ['$log', '$timeout', '$compile', function($log, $timeout, $compile){
return {
    restrict: 'C',
    controller : ['$rootScope', '$scope', '$element', function ($rootScope, $scope, $element){
        var grid_table, 
        datatable_config = {
            "bJQueryUI": true,
            "bProcessing": true,
            "bDeferRender": true,
            "sDom": "Rlfrtip",
            "aaData": [
              {'name': 'Aravind'}
            ]
        };
        datatable_config.aoColumns = [];
        datatable_config.aoColumns.push({
            "sTitle": 'Name', 
            "mData": function(source, type, value){
                //No need to compile the value
                var direct = '<span>' + source.name +'</span>';
                return  direct;
            }
        });
        grid_table = $element.dataTable(datatable_config);
    }]
}

}]）;

谢谢，我希望这可以帮助别人。

Answer 3

尝试此

$scope.tableData = []; // just initialize an array to store data coming from server
      // watch each change in the server-side data to reload grid table
      $scope.$watch("tableData", function (data) {
        $scope.tableParams.reload();
      });
      // Set ng-table parameters with pagination
        $scope.tableParams = new ngTableParams({
          page: 1,      // show first page
        count: 10     // count per page
      }, {
        total: $scope.tableData.length, // length of data
        $scope: {},
        getData: function($defer, params) {
          var filteredData = $scope.tableData;
          // use build-in angular filter
          var orderedData = params.sorting() ? $filter('orderBy')(filteredData, params.orderBy()) : filteredData;
          orderedData = params.filter() ? $filter('filter')(orderedData, params.filter()) : orderedData;
          params.total(orderedData.length); // set total for recalc pagination
          $defer.resolve($scope.results = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
      });

表应该像这样

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered datatables"  ng-table="tableParams"  show-filter="true">
   <tbody>
      <tr ng-repeat="tableData in $data">
         <!-- Checkbox -->
         <td data-title="''"  class="center" header="'ng-table/headers/checkbox.html'" width="4">
            <input type="checkbox" ng-model="checkboxes.items[tableData.id]" />
         </td>
         <!-- name-->
         <td data-title="some title" sortable="'name'" filter="{ 'name': 'text' }">
            <span ng-if="!tableData.$edit">{{tableData.name}}</span> <!--here name should be as same field as in data base-->
         </td>
   </tbody>
</table>