Bind button in a jQuery DataTable

[Jehu]

Hi there!

Thanks to the AngularJS Developers! I've tried backbone, spline,
knockout - but angular seems to be the best choice for some planned
realtime applications.

Doing some tests and experiments, i stumble to the following problem:
I've createt a custom directive for a jQuery DataTable Plugin.
Here's a fiddle to make thinks clear: http://jsfiddle.net/Jehu/2FfTW/4/

I want to bind the button in a grid row to a method in my controler.
Button should later be used to trigger REST actions by $xhr service.
I hope, the grid will represent allways the data model due bindings.
So, would you reccommend the use of DataTables Plugin or should i
better use a simple html table and add filtering and sorting with
angular?

Thanks in advance.
Jehu

[Misko Hevery]

• To make the button work, you need a bit more code.

The issue is that just because you add ng:click it does not magically tell angular that it needs to register a listener. So you have to compile the DOM, but the dataTable will add and remove rows without angular's knowledge, and so it will be hard to keep calling the compile.

So the simplest thing to do is this:

• add a click listener to the button, or generic listener to the root of the table. 
• Inside the click listener you can do element.scope() to get the current scope and then do scope.removeItem(...);

This should do the trick

-- misko

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

[Jehu]

Thank you misko!

On Sep 12, 7:45 pm, Misko Hevery <mi...@hevery.com> wrote:
>    - To make the button work, you need a bit more code.

>
> The issue is that just because you add ng:click it does not magically tell
> angular that it needs to register a listener. So you have to compile the
> DOM, but the dataTable will add and remove rows without angular's knowledge,
> and so it will be hard to keep calling the compile.
>
> So the simplest thing to do is this:
>

>    - add a click listener to the button, or generic listener to the root of
>    the table.
>    - Inside the click listener you can do element.scope() to get the current

[Makarand Bhatamrekar]

Hi,

You can also try to add the following lines to to your controller

 $scope.options.fnCreatedRow = function( nRow, aData, iDataIndex ) {
        $compile(nRow)($scope);
    }

also, take a look at this example
http://jsfiddle.net/TNy3w/2/

regards