Re: [angular.js] Event binding for dynamically loaded content (with jQuery)

[ganaraj p r]

Angular , as far as I can tell , is not meant for externally generated html. 

When you are building an app with angular its always good to "know" all the html you will need. These html's / partials can be loaded when needed but you should be able to define all your html's in different partial files. Dynamically generated html ( if you dont know its structure a priori - something like a piece of html code that is generated by a server side code and you are just including it in your dom! ) would not be such a good fit for angular! This is just my opinion! You can still work with it.. but you will have to do some extra work to do stuff like binding events etc.. 

On Mon, Jul 2, 2012 at 7:33 PM, Todor Pavlov <pav...@gmail.com> wrote:

Hi,

I want to use angular's automatic event binding (ng-click) for dynamically loaded content. 

Here is one example - on jsfiddle. I am loading one button and the binding works. Then after 2 seconds I am loading second button and if I don't use angular.bootstrap(document) the binding does not work but if I use it the first button gets "double binded" :) (the alert pops up twice).

I know that in this case angular.bootstrap(document) is not the correct command - what command to use to initialize only the new code? I know that for that simple example it could be loaded from a controller function and problem will not exist at all but for my real problem this is not possible.

I am giving a simple example here but the problem I have is with datatables (datatables.net) - I have several thousands rows and I am loading them dynamically trough datatable's sAjaxSource property. On each row I have two buttons - edit and delete with ng-click="edit(id)" and ng-click="delete(id)" (those methods are defined in my controller) and I want to make those bindings work. 

I know that there is a datatables directive for Angular but it will make my work more complicated so I don't want to use it.

Thank you for your help,

Todor

--
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/-/zueRVaJbn0sJ.
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.

--
Regards,
Ganaraj P R

[tahiry...@gmail.com]

See this stackoverflow post for solution.

http://stackoverflow.com/questions/4761064/using-jquery-click-function-that-was-loaded-with-ajax-content/13927958#13927958