javascript - 为什么我不能在 jQuery 对话框中使用 ng-click

Question

我想创建一个 div ，它可以使用 jquery 和 angularjs 动态更改背景。

当我单击背景内的文本时，它会打开一个新窗口(Jquery ui 对话框)，我可以选择另一个背景图像。

当我点击图像时，我想更改背景!

我有两个问题:

为什么我无法在对话框动态内容中使用 ng-click？

我有一个包含动态数据的对话框:

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

已加载的数据:

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

当我将数据直接放入对话框 div 时，我使用 ng-click 指令。

第二个问题是:

当我点击时，我会更新

$scope.BackGroundImage

为什么div不改变他的背景图片？

完整的示例在这里:

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

Answer 1

据我了解，您正在尝试使用 jQuery 构建动态 HTML，并期望 Angular 能够理解它。

那是行不通的。 Angular 需要了解正在发生的一切，因此在 Angular“外部”构建内容是一个问题。

要告诉 Angular 新的 HTML 内容，请执行以下操作:

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

这只是理论，可能还有其他方法可以做到这一点，但这给了你一个想法。