AngularJS - jQuery的数据表空 [英] AngularJS - Jquery datatable empty

问题描述

我想显示一个DataTable采用了棱角分明和jQuery的数据表，但至今停留数据表应用数据表功能之后空。

我读过的最好的方法是使用一个指令，但我不能得到它的工作。这只我已经设法得到它的工作是通过应用超时100毫秒（超时小于100没有工作）

我想要做的是DOM渲染后应用数据表功能。我敢肯定，有人已经成功地做​​到这一点;）

userController.js

  myApp.controller（'UserController的'，['$范围，用户，
    功能（$范围，用户）{        User.query（功能（数据）{
            $ scope.users =数据;
        }，功能（errordata子）{
        }）;    }]）;
 

datatableSetup.js

  myApp.directive（'datatableSetup'，['$超时'，
    功能（$超时）{
        返回{
            限制：'A'，
            链接：功能（范围，榆树，ATTRS）{
                $超时（函数（）{
                    elm.dataTable（）;
                }，100）;
            }
        }
    }]）;
 

user.html

 ＆LT;表数据表 - 设置=级=表表边框的表格条纹＆GT;
＆LT;＆THEAD GT;
＆所述; TR＆GT;
    ＆LT;第i个用户名和LT; /第i
    ＆LT;第i个角色和LT; /第i
＆LT; / TR＆GT;
＆LT; / THEAD＆GT;
＆LT;＆TBODY GT;
＆LT; TR NG重复=用户用户＆GT;
    ＆所述; TD＆GT; {{user.username}}＆下; / TD＆GT;
    ＆所述; TD＆GT;
        ＆LT; UL＆GT;
            ＆LT;李NG重复=，在user.roles角色＆GT;
                {{角色}}
            ＆LT; /李＆GT;
        ＆LT; / UL＆GT;
    ＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
 

解决方案

在整合数据表与AngularJS插件，并使用DOM，因为你需要调用之前等待DOM来完成渲染数据源的dataTable（）。

如果您检索的数据进行异步呈现，你需要等待数据是可用的。

我的猜测是，在这种情况下，延时100ms您使用的是足以让这两个已经结束了。

要运行的东西在DOM渲染后，你通常可以包装在 $超时通话，而无需指定的延迟。这将使呼叫在执行队列的末尾，它在运行过程角度应该已经完成​​了$消化循环，一切都应该已经呈现：

  app.directive（'datatableSetup'，['$超时'，
  功能（$超时）{
    返回{
      限制：'A'，
      链接：功能（范围，元素，ATTRS）{        $超时（函数（）{
          element.dataTable（）;
        }）;
      }
    }
  }
]）;
 

现在你需要确保，无论是：

1. 该指令未编译，直到异步调用的数据可用


2. 在该指令的链接时超时$ code未运行，直到从异步调用的数据可用

如果你想要去的第一条路线，你可以把一个 NG-如果表元素延迟DOM部分的创建（和你的指令编译），直到可用的数据。您可以检查用户的数组包含数据或者干脆设置一个变量设置为true，当数据被加载完成：

 ＆LT;表NG-IF =users.length的数据表，设置类=表表边框的表格条纹＆GT;
 

演示： http://plnkr.co/编辑/ Zx2E3cuqPFXe2nhqySXv？p = preVIEW

有关第二路径有多个选项。例如，你可以使用一个观察者，你注销时使用的链接函数中，使用$广播/ $排放甚至是一种服务或一​​些自定义通知系统。

I'm trying to display a datatable using angular and jquery datatable but so far the datatable stays empty after applying the datatable function.

I've read that the best way is to use a directive but I can't get it working. This only I've manage to get it working is by applying a timeout with 100 ms (time out less than 100 didn't work)

What I'd like to do is to apply the datatable function after the DOM is rendered. I'm sure someone has managed to do that ;)

userController.js

myApp.controller('UserController', ['$scope', 'User',
    function ($scope, User) {

        User.query(function(data) {
            $scope.users = data;
        }, function(errorData) {
        });

    }]);

datatableSetup.js

myApp.directive('datatableSetup', ['$timeout',
    function ($timeout) {
        return {
            restrict: 'A',
            link: function (scope, elm, attrs) {
                $timeout(function() {
                    elm.dataTable();
                }, 100);
            }
        }
    }]);

user.html

<table datatable-setup="" class="table table-bordered table-striped">
<thead>
<tr>
    <th>Username</th>
    <th>Roles</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
    <td>{{user.username}}</td>
    <td>
        <ul>
            <li ng-repeat="role in user.roles">
                {{role}}
            </li>
        </ul>
    </td>
</tr>
</table>

解决方案

When integrating the DataTables plugin with AngularJS and using the DOM as the data source you need to wait for the DOM to have finished rendering before calling 'dataTable()'.

If you are retrieving the data to be rendered asynchronously you need to wait for that data to be available as well.

My guess is that in this case the 100ms delay you are using is enough for both of these to have finished.

To run something after the DOM has rendered you can usually wrap the call in a $timeout without specifying a delay. This will put the call at the end of the execution queue and when it's run Angular should have finished the $digest loop and everything should have been rendered:

app.directive('datatableSetup', ['$timeout',
  function($timeout) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {

        $timeout(function () {
          element.dataTable();
        });
      }
    }
  }
]);

Now you need to make sure that that either:

1. The directive is not compiled until the data from the asynchronous call is available
2. The $timeout code in the directive's link is not run until the data from the asynchronous call is available

If you want to go the first route you can put a ng-if on the table element to delay the creation of the DOM portion (and the compilation of your directive) until the data is available. You can check that the users array contains data or simply set a variable to true when the data is finished loading:

<table ng-if="users.length" datatable-setup class="table table-bordered table-striped">

Demo: http://plnkr.co/edit/Zx2E3cuqPFXe2nhqySXv?p=preview

For the second route there are multiple options. You can for example use a watcher inside the link function that you unregister when used, use $broadcast/$emit or even a service or some custom notification system.

这篇关于AngularJS - jQuery的数据表空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！