如何动态创建角度视图?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (26)

我正在使用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。

我怎样才能达到我在这里想要做的?

提问于
用户回答回答于

代码:

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。

用户回答回答于

你可能想用ng-include和ng-repeat结合使用。

这是一个简单的例子:http://plunker.no.de/edit/IxB3wO?live=preview

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

父$范围将保持加载到视图中的部分列表。ng-repeat + ng-include将根据列表迭代并显示部分。

当它是正确的时间,你可以将部分追加到dom列表中。例如:

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

扫码关注云+社区

领取腾讯云代金券