动态创建角度视图 [英] 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 元素时，问题就出现了，特别是使用 angular.例如类似:

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?

推荐答案

你应该 $compile 动态添加角度内容.类似的东西:

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

您还应该获得可以注入其他控制器的 $compile.

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

另见:AngularJS + JQuery:如何在 angularjs 中获取动态内容

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