Perché non posso usare NG-clic nella finestra di dialogo JQuery

Question

Voglio creare un div che può cambiare lo sfondo dinamicamente con jquery e angolarjs.

Quando clicco sul testo all'interno dello sfondo, apri una nuova finestra di Windows ( JQuery UI Dialog ) e posso scegliere un'altra immagine di sfondo.

Quando clicco sull'immagine, vorrei cambiare sfondo!

Ho due domande:

Perché non posso usare ng-click in Contenuto dinamico di dialogo?

Ho una finestra di dialogo con dati dinamici:

$( "#dialog" ).load( item+".html" ).dialog( "open" );

.

I dati che sono stati caricati:

<img  ng-controller="BackgroundCtrl" src="http://etickets.dev10.dev.infomaniak.ch/images/templates/background.jpg" width="20%" height="20%" ng-click="changeBackground.doClick('http://etickets.dev10.dev.infomaniak.ch/images/templates/background.jpg')" />

.

Quando metto i dati Direclty in Dialog Div, uso ng-click Direttiva.

La seconda domanda è:

Quando clicco, aggiorno

$scope.BackGroundImage

.

Perché il div non cambia la sua immagine di sfondo?

The Full Exemple è qui:

http://plnkr.co/edit/?p=streamer&amt ;s=og6GlDaesnGi6CLQ

Answer 1

Come capisco che stai cercando di costruire html dinamico con jQuery e aspettarsi angolare per capirlo.

che non funziona.Angular ha bisogno di sapere tutto ciò che sta succedendo, quindi il contenuto di costruzione "esterno" di Angular è un problema.

Per dire a Angular in merito al nuovo contenuto HTML fai qualcosa come:

$("#dialog").load(item+".html", function () {
  var $this = $(this);
  var html = $this.html();
  var angularCompiled = $compile(html)($scope);
  $this.html(angularCompiled);
}).dialog("open");

.

Questa è solo teoria e probabilmente ci sono altri modi per farlo anche, ma questo ti dà un'idea.