Hooking into 3rd party dynamic dom creation

[zdam]

I am using a 3rd party jquery plugin (DataTables), it creates dom elements dynamically, however it provides a couple of hooks to allow the developer to specify what gets rendered.

I would like to render a button that uses ng-click

So if these hooks allow me to add to the dom, what are the general steps I need to do to ensure angular gets hooked in?

Do I generate a dom string such as: "<button ng-click=tableClickHandler(iRow, iCol)>Click Me</button>"

Then $compile it, then $apply then ??

This page shows the fnCreatedCell and fnRender functions that a user can provide. http://www.datatables.net/usage/columns (7th and 8th properties down the page)

They look something like this:

"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {

// have access to the td here eg:

$(nTd)...

}

"fnRender": function( o, val) {

return 'something, possibly a html string'

}

Thanks, Adam.

[Igor Minar]

You'll need a directive that will wrap this plugin.

I haven't tried this but from your description I think that these things will be necessary:

- the directive has to be terminal

- the directive should append all the dom nodes needed for datatables and initialize it

- now (after the table is initialized) you need to compile the appended dom tree

optionally you might want to use an child or isolate scope for this directive.

try creating a fiddle with something that should work and we'll take it from there. also check the mailing list archive as I do recall seeing various fancy table directives.

/i

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/ktydJ_s6MD0J.
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.

[zdam]

Hi,

I have a directive for this DataTables jquery plugin here:  http://jsfiddle.net/zdam/7kLFU/ 

Search for "fnRender" - this represents a hook that a user of the plugin (and directive) can use to alter what gets rendered by the plugin.

In the example fiddle I am returning markup that will render as a button.  Is there any way during the execution of this function that we can hook Angular in?

Thanks, Adam.

To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

[Igor Minar]

hmm.. I don't know man, this kind of integration is weird because on any change of the model you are rebuilding the entire table. That is terribly inefficient.

but to your question: looks like the only way to go is to use fnRowCallback - http://datatables.net/forums/discussion/6818/fnrender-return-dom-or-jquery-objects-possible/p1

once you get hold of the dom element then you can just register bind('click', function() { scope.$apply(function() { doSomeWork() }) });

that should be it. no need to compile stuff. the declarative approach of defining directives is not going to buy you much here.

as I originally said, at first look the datatable plugin looks like a wrong fit for angular, but I might be wrong.

/i

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/lx4iPZJuM34J.

To post to this group, send email to ang...@googlegroups.com.

To unsubscribe from this group, send email to angular+u...@googlegroups.com.

[zdam]

Cool your suggestion worked.

This fiddle shows how you can click on the price column, and a method inside your controller gets invoked:  http://jsfiddle.net/zdam/7kLFU/ 

I agree DataTables is not a perfect fit, but most established jQuery plugins will not be a perfect fit, and I think it is super-important that Angular has a set of recipes that can be followed to 

help us integrate with these plugins.  Otherwise folks are going to start using Angular, want to use some plugin that they have been happily using for the last n years and quickly start hitting brick

walls in getting them working together.  If it is all too hard, then people will stop using Angular.

Cheers, Adam.

[oluckyman]

I strongly agree with Adam's advice.

AngularJS is such a beautiful construction, but it needs to also pay attention to the market realities (hence my earlier request to handle ugly decorated JSON, which I'm glad to see will be addressed).

E.g., I'm hoping there will be a BIG launch when 1.0 comes out. AngularJS is not nearly as well known as it should be.

I certainly want to see lots of noise on Hacker News, Reddit, Slashdot, etc.

That's why I wrote the animation test; even though it's artificial, people do take notice of these sort of things.

Cheers,

Paul

[Igor Minar]

yep. I agree. we do need to make your noise, but it will only work if the whole community pitches in and helps. :-)

/i

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/bzmdzvFV9wkJ.

To post to this group, send email to ang...@googlegroups.com.

To unsubscribe from this group, send email to angular+u...@googlegroups.com.

[Vojta Jína]

Yep, thank you guys for all the kind words, it means a lot...

As Misko says, now go and tell everyone, even your mom should know about Angular :-D

V.

[Vojta Jína]

Btw, can anyone ping these guys to know about AngularJS ?

http://javascriptweekly.com/

V.

[Swapnil Navlakha]

Can anyone please suggest a quick work around as project deliverables are stuck...?

On Wednesday, July 11, 2012 2:26:16 AM UTC+5:30, ProLoser wrote:

Hey Adam,

We were looking at implementing this in AngularUI and have a few bug tickets with research on implementing this. Do you think you'd be interested in adding it to AngularUI? We're always looking for new core team members!

On Monday, July 9, 2012 9:59:53 PM UTC-7, Todor Pavlov wrote:

Hi Adam,

Thanks for the datatables directive - it was exactly what I was looking for - I can understand it but it would be hard to do it by myself.

And about the hitting the brick wall - this is exactly how I felt :)

Still I fill AngularJS has a great future.

Cheers,

Todor

Thanks, Adam.

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.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/lx4iPZJuM34J.

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.

This e-mail transmission may contain confidential, proprietary and / or legally privileged information and is intended only for the individual or entity named in the e-mail address. Any disclosure, copying, distribution, or reliance upon the contents of this e-mail not authorized by the sender is strictly prohibited. If you have received this e-mail transmission in error, please immediately reply to the sender, so that proper delivery of the e-mail can be effected, and then please delete the message from your Inbox. Any content of this message and its attachments that does not relate to the official business of Saama Technologies Inc. or its subsidiaries must be taken not to have been sent or endorsed by any of them. Email communications are not private and no warranty is made that e-mail communications are timely, secure or free from computer virus or other defect.