Динамическое создание представления angular

Я создаю пользовательский интерфейс игры, используя awesomium, в некоторых случаях игра загружается и исполняет кусок javascript, который предназначен для создания произвольных новых элементов интерфейса. например.

jQuery(document.body).append('<span class="game-status-alert">You Lose!</span>');

Это хорошо работает, проблема возникает, когда я хочу создать несколько более продвинутые элементы пользовательского интерфейса, в частности, используя 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.

Как я могу достичь того, что я пытаюсь сделать здесь?

Ответ 1

Вы должны $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();

Также вы должны получить компиляцию $, которую можно ввести в другой контроллер.

Ответ 2

Возможно, вы захотите использовать 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");

(BTW, перевод DOM в контроллер не является способом angular).