Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 14 down vote favorite
8

I am working on a Ajax app using both JQuery and AngularJS.

When I update content (which contains angularjs bindings) of a div using jquery html function, the angularjs bindings doesn't work.

Here is a sample version of what I am trying to do in jsfiddle

I have dynamic content inside div id '#dynamicContent' and I have a refresh button that would update contents of this div when refresh is clicked. Increment works as expected if I don't refresh the content, but after I refresh angularjs binding stopped working.

This may not be valid in angularjs, but initially built application with jquery and started using angularjs later on so I can't migrate everything to angularjs. Any help with getting this working in angularjs is greatly appreciated.

share|improve this question
1  
Is there any particular reason for using JQuery for this functionality? As this is nicely and easily covered by angular: <jsfiddle.net/pkozlowski_opensource/YCrFD/2/>; – pkozlowski.opensource Aug 2 '12 at 5:48
This is just a simplified version of my real use case to show the problem. In actual application dynamic content is generated by grails taglib which is passed over to jquery as html. So I can't port all logic in grails taglib over to angularjs to make it pure angularjs. – Raja Aug 2 '12 at 14:57

1 Answer

up vote 22 down vote accepted

You need to call $compile on the HTML string before inserting it into the DOM so that angular gets a chance to perform the binding.

In your fiddle, it would look something like this.

$("#dynamicContent").html(
  $compile(
    "<button ng-click='count = count + 1' ng-init='count=0'>Increment</button><span>count: {{count}} </span>"
  )(scope)
);

Obviously, $compile must be injected into your controller for this to work.

Read more in the $compile documentation.

share|improve this answer
Thanks Noah, compile is working when I do it in a controller method and directly bind that controller method to click event of button. Here is working example. But I in my actual app, I had to call the controller method from a different jquery function. so I grabbed reference to scope object and called refresh method to recompile which doesn't work. Here is example. Can you help with getting this example to work. – Raja Aug 2 '12 at 20:13
1  
@Raja When you call angular methods/expression outside of the angular framework you should call $scope.$apply() to perform proper scope life-cycle of exception handling, executing watches, etc. jsfiddle.net/fABdD/14 – Artem Andreev Aug 3 '12 at 4:59
1  
@ArtemAndreev exactly right. @Raja you could also move the call to $scope.$apply() into the refresh() function itself if it makes sense for your architecture: jsfiddle.net/nfreitas/8xkeh/1 – Noah Freitas Aug 3 '12 at 15:21
Thanks @NoahFreitas , ArtemAndreev. That works for me. – Raja Aug 3 '12 at 16:16
Works like a charm! (+1) – Tom Apr 12 at 21:13

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.