使用AngularJS初始化数据表

Initializing Datatables with AngularJS

本文关键字：数据表 初始化 AngularJS 使用      更新时间：2023-09-26

我有一个控制器，用于存储基于销售额的歌曲排名。当控制器初始化时，它已经发送了一个HTTP GET请求，以获取所有需要显示的歌曲（比如说，目前排名前20的歌曲，我认为如果我需要更改这一点，即当用户滚动时，加载更多歌曲，应该不会太难，因为我只需要更改包含所有内容的范围数组，除非我的想法不正确）。我非常喜欢数据表，它们提供了简单的分页、排序等功能。我真的只需要其中的排序部分

<div ng-controller="all_songs">
<table id="1" class="display">
    <thead>
        <tr>
            <th>Song Ranking</th>
            <th>Name</th>
            <th>Album</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="song in Songs">
            <td>{{song.song_ranking}}</td>
            <td>{{song.song_name}}</td>
            <td>{{song.parent_album}}</td>
        </tr>
    </tbody>
</table>
</div>

这是我的angularJS代码：

indexMod.controller('all_songs', ['$scope', '$http', 'getSongsRankingURL', function($scope, $http, getSongsRankingURL) {
    var getPara = 'dev=true&getID=2';
    $http.get(getSongsRankingURL + getPara) //Fetch the song information for ruby voted songs that are currently airing
        .success(function(songs) {
            $scope.Songs = songs;
        })
        .error(function(exception) {
            alert(exception);
        });
}]);

我的问题是如何使用AngularJS初始化表？包括Datatables告诉我要做的事情：

<script>
$(document).ready(function(){
  $('1').DataTable();
 });
 </script>

对表没有影响，但我确实将它包含在DOM的ng应用程序中。这是因为我在AngularJS引导的DOM中包含了这个jQuery代码，还是我调用错了？我真的不知道如何使用jQuery。有更好的替代方式吗？我检查了控制台，没有出现任何错误，我已经包含了数据表告诉我要包含的所有文件。我还包括了jQuery CDN。

使用Angular，您可以使用指令来操作DOM，并注入元素以用作参数。像$('1')这样的选择器只会对你不利。这就是正确获取元素引用以调用函数的方法。

<!-- add the directive to your element -->
<table my-directive> 

// create your directive
app.directive('myDirective', function() {
  return {
    // angular passes the element reference to you
    compile: function(element) {
      $(element).DataTable();
    }
  }
});

这可能不会解决你的问题，但幸运的是，其他人已经将其移植到Angular指令中：http://l-lin.github.io/angular-datatables/#/gettingStarted

相关文章：