Javascript 使用AngularJS初始化数据表

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

<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初始化表？包括Datatables告诉我的操作：

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

$（文档）.ready（函数（）{
$（'1'）.DataTable（）；
});

---

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

使用Angular，您可以使用指令来操作DOM，元素被注入以用作参数。像

$（'1'）

这样的选择器只会对您不利。这是您正确获取元素引用以调用函数的方式

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

---

这可能不会解决你的问题，但对你来说幸运的是，其他人已经将这一点移植到了一个有角度的指令中：

你为什么不接受别人在你的问题上发布的答案？这不仅是出于礼貌，你甚至会因为这样做而得到分数。哦，说实话，我甚至不知道这是一个功能。很抱歉，我现在就做你说接受别人的回答是什么意思？这是一个表示感谢的回答！还是有一个按钮可以接受你的问题的答案？我似乎觉得它不太受欢迎。查看本教程：当用户不接受有用的答案时，它会被认为是不受欢迎的。没有问题，因为你不知道。

<!-- 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();
    }
  }
});