javascript - span - Creando dinámicamente una vista angular.

span html5

Question

Estoy creando una interfaz de usuario en el juego con awesomium. En algunos puntos, el juego se carga y ejecuta un fragmento de javascript destinado a crear nuevos elementos de interfaz de usuario arbitrarios. p.ej

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

Eso funciona bien, el problema surge cuando quiero crear algunos elementos de la interfaz de usuario ligeramente más avanzados, específicamente utilizando angular. Por ejemplo algo como:

function ChatBoxControl($scope) { /* Stuff */ }

jQuery(document.body).append(
    ''<div ng-controller="ChatBoxControl"><div ng-repeat="line in chat"><span>{{line}}</span></div></div>''
);

No en vano, esto no crea una nueva vista angular. Simplemente agrega ese html al documento y nunca se enlaza al ChatBoxControl.

¿Cómo puedo lograr lo que estoy tratando de hacer aquí?

Answer 1

Es posible que desee utilizar ng-include combinado con ng-repeat. Aquí hay un ejemplo simple: http://plunker.no.de/edit/IxB3wO?live=preview

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

Parent $ scope mantendrá la lista de parciales cargados en la vista. Y ng-repeat + ng-include se repetirá y mostrará los parciales según la lista.

Cuando es el momento adecuado, puede agregar el parcial a la lista de dom. p.ej

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

(Por cierto, poner la manipulación DOM en el controlador no es la forma angular).

Answer 2

Usted debe $compile contenido angular agregado dinámicamente. Algo como:

jQuery(document.body).append(
    $compile(  
        ''<div ng-controller="ChatBoxControl"><div ng-repeat="line in chat"><span>{{line}}</span></div></div>''
    )(scope)
);

alcance para cualquier elemento que pueda obtener usando algo como:

var scope = angular.element(''#dynamicContent'').scope();

También debe obtener $ compilación que puede ser inyectado en otro controlador.

Ver también: AngularJS + JQuery: cómo hacer que el contenido dinámico funcione en angularjs