javascript - 动态创建 Angular View

Question

我正在使用 awesomium 制作游戏内 UI，在某些时候游戏会加载并执行一段 javascript，这意味着创建任意新的 UI 元素。例如

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

效果很好，当我想创建一些稍微更高级的 UI 元素(特别是使用 Angular)时，问题就出现了。例如:

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

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

毫不奇怪，这不会创建新的 Angular View 。它只是将该 html 添加到文档中，并且从不绑定(bind)到 ChatBoxControl。

我怎样才能实现我在这里想做的事情？

Answer 1

你应该$compile动态添加 Angular 内容。 像这样的东西:

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

您可以使用以下方式获得的任何元素的范围:

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

您还应该获得可以注入(inject)其他 Controller 的 $compile。

另请参阅:AngularJS + JQuery : How to get dynamic content working in angularjs