Dynamically creating an angular view

Question

I\'m making an in game UI using awesomium, at some points the game loads up and executes a chunk of javascript which is meant to create arbitrary new UI elements. e.g.

Answer 1

You might want to use ng-include combined with ng-repeat. Here is an simple example: http://plunker.no.de/edit/IxB3wO?live=preview

  <div ng-repeat="dom in domList" ng-include="dom"></div>

Parent $scope will keep the list of partials loaded into the view. And ng-repeat + ng-include will iterate over and display partials according to the list.

When it is the right timing, you can append the partial into the dom list. e.g.

$scope.domList.push("chatbox.html");

(BTW, putting DOM manipulation into controller is not the angular way.)

Answer 2

You should $compile dynamically added angular content. Something like:

jQuery(document.body).append(
    $compile(  
        '<div ng-controller="ChatBoxControl"><div ng-repeat="line in chat"><span>{{line}}</span></div></div>'
    )(scope)
);

scope for any element you can get using something like:

var scope = angular.element('#dynamicContent').scope();

Also you should get $compile that can be injected in other controller.

See also: AngularJS + JQuery : How to get dynamic content working in angularjs