动态创建角度视图

Posted 2023-03-05

【中文标题】动态创建角度视图

【英文标题】：Dynamically creating an angular view

【发布时间】：2012-08-16 06:47:46

【问题描述】：

我正在使用 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>'
);

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

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

【参考方案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

【讨论】：

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

【参考方案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 操作放入控制器不是角度方式。）

【讨论】：

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

通过 angularjs，看起来如果控制器进行 DOM 操作，它更像是一个“服务”而不是一个控制器。然后可以将服务注入到 Controller 中使用。但同样，服务应该有尽可能少的 DOM 操作，因为这样它就不适合测试了。