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.

jQuery(document.body).append('<span class="game-status-alert">You Lose!</span>');

That works nicely, the problem comes when I want to create some slightly more advanced UI elements, specifically using angular. For example something like:

function ChatBoxControl($scope) { /* Stuff */ }

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

Not surprisingly, this does not create a new angular view. It simply adds that html to the document and never binds to the ChatBoxControl.

How can I achieve what I'm trying to do here?

Community · Accepted Answer · 2017-05-23 12:09:20Z

23

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

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Aug 21, 2012 at 6:30

Artem Andreev

19.9k5 gold badges46 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Martin Over a year ago

I'm going to accept this answer, since it uses strings of html and not a reference to a HTML file and is thus closer to my original question :)

Tosh · Accepted Answer · 2012-08-21 00:31:49Z

5

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.)

answered Aug 21, 2012 at 0:31

Tosh

36k11 gold badges67 silver badges58 bronze badges

2 Comments

Martin Over a year ago

I understand that DOM manipulation isn't the angular way, but unfortunately it is unavoidable due to the way the game UI system works :(

Alex Dn Over a year ago

By angularjs, it looks like if controller makes DOM manipulations, it's more a "service" then a controller. The service can be then injected into Controller for use. But again, services should have as low amount as possible of DOM manipulations, since then it not testing friendly.

Collectives™ on Stack Overflow

Dynamically creating an angular view

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related