动态地创建一个角度视图 [英] Dynamically creating an angular view

问题描述

我使用awesomium作出在游戏UI，在一些点游戏加载和执行JavaScript这是为了创建任意新的UI元素的一大块。例如。

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>');

这工作得很好，问题就来了，当我想创造一些稍微高级UI元素，特别是采用了棱角分明。例如是这样的：

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>'
);

这并不奇怪，这不创建一个新的角度视图。它简单地补充说，到HTML文档，永不绑定到ChatBoxControl。

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?

推荐答案

您应该 $编译动态添加棱角分明的内容。
是这样的：

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.

参见：<一href=\"http://stackoverflow.com/questions/11771513/angularjs-jquery-how-to-get-dynamic-content-working-in-angularjs\">AngularJS + JQuery的：如何获得动态内容angularjs工作

这篇关于动态地创建一个角度视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！