Use Angular only in page loaded via ajax

Question

<html>
<head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
</head>
<body>
    <div id="ajax-content-here">

    </div>
</body>
</html>

I am really new to angular so please be gentle!

So the idea is as stated above in the title - I load my page with angular library included in head section. Later I load data (below) into the div container using ajax (jquery).

<div id="angular-test">
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
</div>

I would like to somehow initialize the angular to be active only inside #angular-test container after ajax request is completed. I assume it has something to do with scope object right?

Thanks!

You should start with reading this: http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background — TheHippo, Jun 03 '13 at 15:23
I did read that actually, but in my case I'm creating a new section in a huge project and I would like to use angular just in this section. Since It is not possible right now to rewrite everything from scratch using angular I want to start small. It should be possible right? There is no way someone hasn't had this problem before. — Krabats, Jun 03 '13 at 17:05
Use custom written directives or the whole "routing package" to use ajax fetched HTML. Still sounds like a bad idea. — TheHippo, Jun 03 '13 at 20:00
I agree with @TheHippo, Angular has its own mechanisms to lazy-load HTML partials, mixing jQuery and Angular is bound to give your a lot of headaches. — robertklep, Jun 03 '13 at 20:12
To clarify: Angular is, in contrast to jQuery, a framework and not a library. Things are meant to be done in specific ways. What you are trying to archive is exactly the opposite from how you should do it. — TheHippo, Jun 03 '13 at 21:20
Well - should I abandon the angular idea in my case and just keep on using jQuery? This project is a single page web application so it seemed to me as a good place to try angular. — Krabats, Jun 04 '13 at 09:17

thesamet · Accepted Answer · 2013-06-21T16:23:50.057

Angular does initialization (which includes looking for ng-app and template compilation) once the DOM finishes loading (on DOMContentLoaded event). Angular does not have a way to know that the DOM is changed and an ng-app is added to the DOM later once the AJAX response is received.

So, you can try initializing bootstrap manually after the DOM is really finalized (that is on your jquery ajax callback, after you assign to innerHTML). In the callback do something like the following:

  angular.bootstrap($('#ajax-content-here'));

Assuming that the content inside ajax-content-here refers to some ng-app. Take a look at the manual initialization section at http://docs.angularjs.org/guide/bootstrap

score 0 · Answer 2 · answered Jun 03 '13 at 14:36

0

<div ng-app id="angular-test">

The ng-app part will initialize angular inside angular-test.

answered Jun 03 '13 at 14:36

MaxWillmott

2,170
2
23
34

I doubt that it will be initialized by Angular when it's being loaded with AJAX, though ([demo](http://plnkr.co/edit/bUYMoRFUjOlRF1VgnDVr?p=preview)). – robertklep Jun 03 '13 at 14:46

Use Angular only in page loaded via ajax

2 Answers2