Question

我使用jqueryDataTables对我应用中的表格中的数据进行排序。

而不是在页面上使用脚本标记，而不是它需要在页面上使用，我想我可以将它包含在我的角度控制器代码中，但是我得到了一个奇怪的错误。

我在Angular之前使用了jQuery的混合，所以不确定为什么它在这种情况下不起作用。

错误和代码如下： TypeError：无法读取属性＆＃39; childNodes＆＃39;未定义 enter image description here

// Controller for Manage Users
app.controller('ManageUsersController', function($scope) {

    // Init
    $scope.status_dropdown = false;
    $scope.deactivate_btn = false;

    // Check all users:
    this.checkAll = function(target) {
        var checkboxes = document.getElementsByName('checkboxUser');
        var checkAll = document.getElementsByName('checkboxAll');

        for(var i=0, n=checkboxes.length;i<n;i++) {
            checkboxes[i].checked = checkAll[0].checked;
        }
    };

    alert('1');
    $('#manage_users_table').DataTable();
    alert('2');
});

在第一个提醒消息中

HTML： enter image description here

第二条提醒消息中的HTML，DataTable()初始化后 enter image description here

警报每次弹出两次。

HTML
要点：https://gist.github.com/leongaban/4f1de6bee8672b4177e5

<div id="manage_content" class="page" ng-controller="ManageUsersController as manageUsers">
    <table id="manage_users_table" width="100%">
        <tr>... hardcoded table data here



    <!-- PRODUCTION SCRIPTS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <!-- DEVELOPMENT SCRIPTS -->
    <!-- Libs & Vendors -->
    <script src="src/js/libs/angular.min.js"></script>
    <script src="src/js/libs/angular-route.min.js"></script>
    <script src="src/js/libs/jquery.dataTables.js"></script>
    <script src="src/js/vendors/modernizr.min.js"></script>
    <script src="src/js/vendors/bootstrap.min.js"></script>

    <!-- Modules -->
    <script src="src/js/modules/app.js"></script>
    <script src="src/js/modules/products.js"></script>
    <script src="src/js/modules/manage.js"></script>
    <script src="src/js/modules/profile.js"></script>
</body>

Answer 1

似乎这个以前的响应没有返回用于填充表的数据。所以你试图将datatables脚本附加到空表。

所以我在加载表内容的某个地方假设错误。

静态数据的小例子：

<html ng-app="someApp">
<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.3/css/jquery.dataTables.css">
    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <!-- DataTables -->
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.js"></script>
</head>
<body>
  <div ng-controller="ManageUsersController">
        <table id="manage_users_table" class="display">
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Row 1 Data 1</td>
                    <td>Row 1 Data 2</td>
                </tr>
                <tr>
                    <td>Row 2 Data 1</td>
                    <td>Row 2 Data 2</td>
                </tr>
            </tbody>
        </table>
  </div>
  <script type="text/javascript">
    var app = angular.module('someApp', []);
    app.controller('ManageUsersController', function($scope) {
        $('#manage_users_table').DataTable(); // <-- errors
    });
  </script>
</body>
</html>

Answer 2

解决方案很简单

在数据绑定到表之前，您正在尝试$('#manage_users_table').DataTable();。数据绑定后尝试相同。 对我来说很好用

Answer 3

我最近遇到了这个问题，但意识到自己做了什么。您可以通过使用本机setTimeout或等效的AngularJS $timeout来避免此问题。

下面是$timeout实现的示例。

var myApp = angular.module('myApp', []);
app.controller('ManageUsersController', function($scope, $timeout) {

  //Executes when Angular has finished loading.
  $timeout(function() {
    $('#manage_users_table').DataTable();
  });
});

在Angular中使用jqueryDataTables，在Controller中获取childNodes错误

3 个答案: