16

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?

Zoey
  • 2,391
  • 2
  • 22
  • 28
  • 1
    Are the 'apps' distinct Angular apps (each have an `ng-app` declaration?) or just different controllers/views for the same app? If there are just different controllers/view, I would use the appList as your navigation and setup `$routeProviders` (http://docs.angularjs.org/api/ng.$routeProvider) to manage the different views. – Noah Freitas Jul 03 '12 at 20:38
  • Probably a better solution than the one I was attempting, but I am still new to Angular, so I'll try it out. Thanks. – Zoey Jul 03 '12 at 20:50

3 Answers3

27

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.

Zoey
  • 2,391
  • 2
  • 22
  • 28
  • If you don't have JQuery explicitly loaded, you can just `var appPane = document.getElementById` and `appPane.innerHTML = data)` and `$compile(containerElement)($scope)` – Sam Barnum May 24 '21 at 23:33
6

Look at $routes and ngView in angularjs.

Here's a very basic example:

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

bearfriend
  • 10,322
  • 3
  • 22
  • 28
  • This is the 'official' alternative, but does not currently work in situations requiring a layered structure of controllers as in my original problem. – Zoey Jul 22 '12 at 09:56
4

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.

Alejandro García Iglesias
  • 16,222
  • 11
  • 51
  • 64
  • 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. – Zoey Feb 04 '14 at 11:48
  • 1
    I'm happy that these things (the AngularJS ecosystem) are evolving the way they are. – Alejandro García Iglesias Feb 06 '14 at 20:14
  • 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. – Zoey Mar 21 '14 at 21:15