Rebind angular bindings when dynamically adding content

Question

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?

don't add the rows yourself, instead just update the collection that the table is built from. — user400654
– user400654, Commented Aug 12, 2014 at 17:11
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 — charlietfl
– charlietfl, Commented Aug 12, 2014 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
– Vivendi, Commented Aug 12, 2014 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. — user400654
– user400654, Commented Aug 12, 2014 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? — user400654
– user400654, Commented Aug 12, 2014 at 19:40

George Pantazis · Accepted Answer · 2014-08-12 19:51:02Z

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

edited Aug 12, 2014 at 19:51

answered Aug 12, 2014 at 17:31

George Pantazis

5743 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vivendi Over a year ago

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 Over a year ago

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.

Collectives™ on Stack Overflow

Rebind angular bindings when dynamically adding content

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related