动态创建一个Angular视图

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视图。它只是将HTML添加到文档中，而不会与ChatBoxControl绑定。

我该如何实现我想做的事情？

- Martin

Answer 1

你应该对动态添加的Angular内容进行$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：如何使动态内容在angularjs中工作

- Artem Andreev

---

我会接受这个答案，因为它使用HTML字符串而不是对HTML文件的引用，因此更接近我的原始问题 :) - Martin

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列表中。例如：

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

（顺便说一句，将DOM操作放入控制器不是Angular的做法。）

- Tosh

---

我知道DOM操作不是Angular的方式，但不幸的是，由于游戏UI系统的工作方式，这是不可避免的 :( - Martin

通过AngularJS，如果控制器进行DOM操作，则更像是“服务”而不是控制器。然后可以将该服务注入到控制器中以供使用。但是，服务应尽可能少地进行DOM操作，因为这样不利于测试。 - Alex Dn