动态地创建一个角度视图 [英] 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屋!