动态创建角度视图

Question

我正在使用awesomium制作游戏中的用户界面，有时游戏会加载并执行一段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>'
);

毫不奇怪，这不会创建新的角度视图。它只是将该html添加到文档中，而从未绑定到ChatBoxControl。

我如何才能在这里实现自己的目标？

Answer 1

您应该$ compile动态添加角度内容。就像是：

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

另外，您还应该获得可以在其他控制器中注入的$ compile。