Load AngularJS Template within page, dynamically

Question

I have a page containing 2 controllers: one which manages a list of so-called 'apps', and another that is to place the new Angular template into the innerHTML of its Div element.

<div ng-controller="appList"></div>
<div ng-controller="appPane"> Dynamic content should be loaded here! </div>

I have tried using the standard {{expression}} bindings, but they do not work with html, I have also tried the ng-bind-html-unsafe directive (Binding the innerhtml to that of the App request's return) but controllers are not executed within this new code.

The problem seems to be that by using a Binding, Angular is not re-parsing the contents of the html in question to use it as an angular app. Any ideas of how to get it to parse dynamic content?

Solution 1

Take a look at the uiRouter module (from the AngularUI project). It adds the concept of states, which are pretty similar to routes, but with other goodies, such as the ability to nest them. For example:

$stateProvider
    .state('myState', {
        url: '/mystate',
        templateUrl: '...',
        controller: 'MyCtrl'
    })
    .state('myState.substate', {
        url: '/{substate}',
        templateUrl: '...',
        controller: 'MySubCtrl'
    });

MySubCtrl will be activated whenever you go to /mystate/something and you can use that "something" as a parameter (see $stateParams). You can nest states to any amount of levels.

Solution 2

It appears that the $compile service, when fed the elements you wish to recompile along with your current scope, does what I was looking for.

Example from my source:

var appPane = $('#AppPane');//JQuery request for the app pane element.
appPane.html(data);//The dynamically loaded data
$compile(appPane.contents())($scope);//Tells Angular to recompile the contents of the app pane.

This should help anyone experiencing my problem, I hope.

Solution 3

Look at $routes and ngView in angularjs.

Here's a very basic example:

http://jsfiddle.net/pXpja/3/

Comments

[Zoey]

This is the 'official' alternative, but does not currently work in situations requiring a layered structure of controllers as in my original problem.

[Zoey]

That sounds really useful! Being that my answer was from the early development of Angular, this hadn't existed- Others feel free to comment if this should not be the case, but I feel this is now the correct answer. Accepted.

[Alejandro García Iglesias]

I'm happy that these things (the AngularJS ecosystem) are evolving the way they are.

[Zoey]

For the record, I have tried this solution out in my own projects and it is extremely useful. There are a few issues, such as navigation to nonexistent routes resulting in errors, but I am betting that hidden in their moderate-depth documentation is a means of detecting when a route doesn't exist such that it could be handled. As a general-case scenario, I recommend this solution to anyone attempting to use routes, and I recommend skipping the official Route provider from Angular, as this one is so much more powerful.

[eCommerce Guru]

If you don't have JQuery explicitly loaded, you can just var appPane = document.getElementById and appPane.innerHTML = data) and $compile(containerElement)($scope)