0

I have the following code that is rendered when the page is loaded

<div id="results">
 <%= render :partial => results %>
</div>

Here is the content of results partial:

<input type="text" ng-model="Myname" placeholder="Enter a name here">  
<h1>Hello {{Myname}} </h1>

The binding happens properly and works perfectly fine.

Now if I replace jQuery("#results") with results partial, then the content is replaced but directives are not compiled and the binding is also broken.

Compiling angular directives happens during the first time when the page is loaded. but if we change HTML content dynamically then it breaks. Can anyone help me understand what I am doing wrong here.

Anders R. Bystrup
  • 15,729
  • 10
  • 59
  • 55
Chubby Boy
  • 30,942
  • 19
  • 47
  • 47

1 Answers1

1

You are right, compiling happens upon the loading of the page.. Or whenever angular changes something in the DOM (via directives such as ngRepeat, etc..)

As you are changing the DOM manually, all you need to do is trigger a $compile on the DOM element you changed. Just do $compile(jQuery("#results")) and the binding should work! See more here.

Tiago Roldão
  • 10,629
  • 3
  • 29
  • 28
  • Thanks Tiago! I tried with **angular.bootstrap(document);** and this helped in bootstraping the document again And it worked. Any idea how does this differ from $compile? – Chubby Boy Dec 04 '12 at 11:07
  • 1
    You shouldn't be using bootstrap (it should be used to bootstrap the whole angular app - it is the manual equivalent of ng-app, read here: http://docs.angularjs.org/api/angular.bootstrap). Use $compile as Tiago suggested. – matys84pl Dec 04 '12 at 11:34
  • matys84pl is right - $compile tells angular to go look in a specific DOM element, rather than recompiling the whole document. So angular.bootstrap does work, but it is bad code - it would most likely break later on, resetting app states or something else. – Tiago Roldão Dec 04 '12 at 11:40