Pourquoi je ne peux pas utiliser ng-click dans jQueryDialog

Question

Je veux créer un div qui peut changer l'arrière-plan de manière dynamique avec jquery et angulairejs.

Lorsque je clique sur le texte en arrière-plan, une nouvelle fenêtre s'ouvre (Boîte de dialogue de l'interface utilisateur Jquery) et je peux choisir une autre image de fond.

Quand je clique sur l'image, je souhaite changer de fond !

J'ai deux questions:

Pourquoi je ne peux pas utiliser ng-click dans le contenu dynamique du dialogue ?

J'ai une boîte de dialogue avec des données dynamiques :

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

Les données qui ont été chargées :

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

Lorsque je mets des données directement dans un div de dialogue, j'utilise ng-click directif.

La deuxième question est la suivante :

Quand je clique, je mets à jour

$scope.BackGroundImage

Pourquoi le div ne pas changer son image de fond ?

L'exemple complet est ici :

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

Answer 1

Si je comprends bien, vous essayez de créer du HTML dynamique avec jQuery et vous attendez à ce qu'Angular le comprenne.

Cela ne fonctionne pas.Angular a besoin de savoir tout ce qui se passe, donc créer du contenu « en dehors » d'Angular est un problème.

Pour informer Angular du nouveau contenu HTML, procédez comme suit :

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

Ce n’est que de la théorie et il existe probablement d’autres façons de procéder, mais cela vous donne une idée.