Warum ich ng-click nicht in jQueryDialog verwenden kann

Question

Ich möchte eine erstellen div Wer kann den Hintergrund dynamisch mit JQuery und AngularJS ändern?

Wenn ich auf den Text im Hintergrund klicke, öffnet sich ein neues Fenster (JQuery-UI-Dialog) und ich kann ein anderes Hintergrundbild auswählen.

Wenn ich auf das Bild klicke, möchte ich den Hintergrund ändern!

Ich habe zwei Fragen:

Warum ich es nicht verwenden kann ng-click in Dialog dynamische Inhalte?

Ich habe einen Dialog mit dynamischen Daten:

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

Die geladenen Daten:

<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')" />

Wenn ich Daten direkt in das Dialog-Div einfüge, verwende ich ng-click Richtlinie.

Die zweite Frage lautet:

Wenn ich klicke, aktualisiere ich

$scope.BackGroundImage

Warum zum div sein Hintergrundbild nicht ändern?

Das vollständige Beispiel finden Sie hier:

http://plnkr.co/edit/?p=streamer&s=og6gLDAeSNgi6clQ

Answer 1

Soweit ich weiß, versuchen Sie, dynamisches HTML mit jQuery zu erstellen, und erwarten, dass Angular es versteht.

Das funktioniert nicht.Angular muss über alles Bescheid wissen, was vor sich geht, daher ist die Erstellung von Inhalten „außerhalb“ von Angular ein Problem.

Um Angular über den neuen HTML-Inhalt zu informieren, gehen Sie wie folgt vor:

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

Dies ist nur eine Theorie und es gibt wahrscheinlich auch andere Möglichkeiten, dies zu tun, aber das gibt Ihnen eine Idee.