How to bind a angular ng-click event on after lnserted HTML

Question

I am developing rails application where angularjs use in it.

I am facing one problem which i can't understand. Angularjs works fine in all events but i have one module where new html load after page scroll and one another where push new html into existing html on page.

On new html inserted in page, one button in new html where i would like to ng-click event bind with it so when user click on that button i want to procedure.

I tried it but not getting how to bind with button because on loaded html bind easily but in new html not bind.

How to bind on that new HTML button?

Any one have a idea?

Thanks

it would help you to show us what you did to add the html... in theory you shouldn't insert html by yourself. It should be angular who create new html — Loïc Faure-Lacroix
– Loïc Faure-Lacroix, Commented Sep 12, 2014 at 11:25
Yes, you are right.. it is easy to show if code here... but its some confusion in code.. so not explain using code...just want to know how to bind ng-click event on any element — harsh4u
– harsh4u, Commented Sep 12, 2014 at 11:31
if you insert html that has angular directives or expressions in it you need to use $compile() — charlietfl
– charlietfl, Commented Sep 12, 2014 at 11:31

agusluc · Accepted Answer · 2014-12-17 19:27:47Z

2

You need to compile the html in order to get the binds.

Inject $compile in your controller and:

var cHtml = $compile("<button ng-click='doSomething()'>Click me!</button>")($scope);

Then you can add that html using element.append() or jquery

edited Dec 17, 2014 at 19:27

answered Sep 12, 2014 at 14:16

agusluc

1,4752 gold badges16 silver badges24 bronze badges

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

3 Comments

bengro Over a year ago

The use of $compile is correct, but I suggest putting this piece of logic into a directive. Directive are the components that interact with the DOM, not controllers.

Wes Over a year ago

Is there a reason why the () don't match up? Am I missing something?

steve Over a year ago

What about if I'm inserting a link that should have ng-click using optimizely or some similar testing tool? Obviously I don't have access to any of these variables ($compile or $scope)

Collectives™ on Stack Overflow

How to bind a angular ng-click event on after lnserted HTML

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related