current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 1 down vote favorite

I have a controller that stores the rankings of songs based on sales. When the controller is initialized it already sends an HTTP GET request to get all the songs that will ever be needed to be displayed (for now the top 20 songs let's say, I think if I ever need to change this i.e. when the user is scrolling, load more songs, shouldn't be too difficult as I just need to change the scope array that holds everything, unless my thinking is incorrect). I absolutely love datatables and they offer easy pagination, sorting, etc. I really only need the sorting part of it. I have my HTML table here:

<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>

And this is my angularJS code:

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);
        });
}]);

My question is how do I initialize the table with AngularJS? Including what Datatables told me to do:

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

Has no effect on table, but I did include it inside the ng-app of my DOM. Is this because I am including this jQuery code inside a AngularJS bootstrapped DOM or am I doing this call wrong? I really have no idea how to use jQuery. Is there a better alternative way? I checked the console and there are no errors appearing and I already included all the files datatables told me to include. I included the jQuery CDN as well.

share|improve this question
    
Why don't you accept answers that people post on your questions? It's not only polite, you even get points for doing it. – m59 Mar 2 at 0:17
    
Oh to be completely honest, I didn't even know that was a feature. Sorry about that, I'll do it now – Philip Tsang Mar 2 at 1:43
    
What do you mean accept people's answer? Is that a reply saying thanks! or is there a button to accept an answer to your question? I can't seem to find it – Philip Tsang Mar 2 at 1:43
    
Nvm, I found it – Philip Tsang Mar 2 at 1:44
    
Much appreciated. Check out the tour: stackoverflow.com/tour It comes across as non-appreciative when users don't accept helpful answers. No problem since you didn't know. – m59 Mar 2 at 1:56

1 Answer 1

up vote 2 down vote accepted

With Angular, you use directives to manipulate the DOM, and the elements are injected for your use as parameters. Selectors like $('1') are only working against you. This is how you would properly get the element reference to call the function.

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

That probably isn't going to solve your problem, but fortunately for you, someone else has already ported this into an Angular directive: http://l-lin.github.io/angular-datatables/#/gettingStarted

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.