Question

我正在使用awesomium创建一个游戏UI，在某些时候游戏加载并执行一大堆javascript，这意味着创建任意新的UI元素。 e.g。

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。

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

Answer 2

您可能希望将ng-include与ng-repeat结合使用。这是一个简单的例子：http://plunker.no.de/edit/IxB3wO?live=preview

  <div ng-repeat="dom in domList" ng-include="dom"></div>

父$ scope将保留部分列表加载到视图中。并且ng-repeat + ng-include将迭代并显示部分列表。

当它是正确的时间时，您可以将部分附加到dom列表中。 e.g。

$scope.domList.push("chatbox.html");

（顺便说一句，将DOM操作放入控制器不是有角度的方式。）

动态创建角度视图

2 个答案: