0

I'm using AngularJS and DataTables. This all works fine untill I dynamically add rows the Datatable. Then I lose the Angular bindings on each new row in the table.

How can I rebind those bindings?

If you take a look at this demo: http://plnkr.co/edit/zXh4UbJvYwZsRtsuTnLw?p=preview

Then you can press on both href links and you'll see a message appear in console.

If you then press on the "ADD" button then two new rows are added. Those two new rows can't call the msg() function anymore.

Anyone any idea how to fix this problem?

Vivendi
  • 20,047
  • 25
  • 121
  • 196
  • 1
    don't add the rows yourself, instead just update the collection that the table is built from. – Kevin B Aug 12 '14 at 17:11
  • 2
    your approach to using angular as a wrapper for jQuery code is all wrong. [how-do-i-think-in-angularjs-if-i-have-a-jquery-background](http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background) – charlietfl Aug 12 '14 at 17:12
  • @KevinB I can't do that. This is because I'm using DataTables. It's not like I can update a `$scope` variable and let DataTables auto magically auto update as well. I have to feed it Javascript arrays. So my example is just a simple way of describing the problem. I need a way to fix my demo code so that the newly added rows also have AngularJS bindings. – Vivendi Aug 12 '14 at 19:36
  • I would drop your dependency on DataTables and go for a datatable solution more tailored for angularjs. If that isn't an option, wrap the datatable in a directive. – Kevin B Aug 12 '14 at 19:37
  • What does DataTables give you that you can't get with simple angular filters and ng-repeat? it can handle query filtering, column sorting, alternate row colors, what else would you need? – Kevin B Aug 12 '14 at 19:40
  • @KevinB The visuals in the header to show what column is sorted asc/desc. Pagination options. Global search and column search. That's basically what I need. I will probably make this myself if I can't get this to work with an easy solution. I don't need all the other "fancy" stuff like ajax loading, stylings, language options etc. So yeah, this could be an option as well. – Vivendi Aug 12 '14 at 19:49
  • Definitely sounds like an easy case for dropping dataTables then. Most of what you're trying to do is already built into ng-repeat. You'll also need the [filter](https://docs.angularjs.org/api/ng/filter/orderBy). – Kevin B Aug 12 '14 at 19:50

1 Answers1

1

Like is said above, you're thinking about Angular from a jQuery mindset. Here's a quick fork of yours showing how you could be using ng-repeat to do this in a more Angular way:

http://plnkr.co/edit/jXySErcKW6XuYGr4P6cA

The repeater:

  <tr ng-repeat="foo in entries">
    <td>{{$index + 1}}</td>
    <td>User {{$index + 1}}</td>
    <td><a href="#" ng-click="msg()">link {{$index + 1}}</a>
    </td>
  </tr>

The JS:

  // make a single entry.
  $scope.entries = [{}];

  // add an entry.
  $scope.swap = function() {
    $scope.entries.push({});
  }

  // ngClick method.
  $scope.msg = function() {
    console.log('MSG');
  }

However, if you need to deal with DOM in exactly that way for the sake of this plugin, it looks like you were on the right track with $compile.

http://plnkr.co/edit/sxa5pVQU834SBLFLOj1K

You need to compile the DOM string with a new scope, and then append that.

var newThing = $compile(t)($scope.$new());

$('#data tbody').append(newThing);
George Pantazis
  • 574
  • 3
  • 6
  • I'm using DataTables, so I can't use it like this. I need to feed DataTables with Javascript arrays so that it "knows" what data is rendered by AngularJS. So using this method works visually, until is do sorting or filtering with DataTables. My demo describes exactly whats going on when I use AngularJS and DataTables together. So I need a way to make that demo work with AngularJS. – Vivendi Aug 12 '14 at 19:33
  • If I want to make this work for DataTables, then I'd probably have to write an extension method for it that does the filtering, sorting. Because DataTables is the one that appends the DOM and I don't have direct control over it. But at least I know what I have to use to let this all work. Thanks for the help. – Vivendi Aug 12 '14 at 20:01