Инициализация Datatables с AngularJS

Question

У меня есть контроллер, который хранит рейтинги песен на основе продаж. Когда контроллер инициализируется, он уже отправляет 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 код:

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. Это потому, что я включаю этот код jQuery в загрузочный DOM-модуль AngularJS, или я делаю это неправильно? Я действительно не знаю, как использовать jQuery. Есть ли лучший альтернативный путь? Я проверил консоль, и никаких ошибок не появилось, и я уже включил все файлы, которые мне сказали. Я включил CDN jQuery.

Answer 1

С помощью 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(); 
    } 
    } 
}); 

Это, вероятно, не собирается, чтобы решить вашу проблему, но, к счастью для вас, кто-то уже портированы это в угловую директиву: http://l-lin.github.io/angular-datatables/#/gettingStarted