我正在使用awesomium制作游戏中的用户界面,在某些情况下,游戏加载并执行一大块javascript,这意味着要创建任意的新用户界面元素。例如:
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。
我如何在这里实现我想要做的事情呢?
发布于 2012-08-21 14:30:53
你应该$compile动态添加的angular内容。类似于:
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
发布于 2012-08-21 08:31:49
您可能希望结合使用ng-include和ng-repeat。下面是一个简单的例子:http://plunker.no.de/edit/IxB3wO?live=preview
<div ng-repeat="dom in domList" ng-include="dom"></div>
Parent $scope将保留加载到视图中的部分列表。ng-repeat + ng-include将根据列表迭代并显示分词。
当时机合适时,您可以将部分添加到dom列表中。例如:
$scope.domList.push("chatbox.html");
(顺便说一句,把DOM操作放到控制器中不是角度的方式。)
https://stackoverflow.com/questions/12046129
复制相似问题