Javascript 如何捕捉远程加载数据上的点击事件并用angularJS显示

我想在我的html数据中包含从ajax请求加载的html数据，并在图像上触发单击事件。我知道这在SPA world中是错误的，但我需要显示所见即所得编辑器中的数据

这是使用jQuery从版本重构的代码：

但它不起作用，因为当我在图像上触发单击事件时，图像不在DOM中。。。解决此问题的最佳做法是什么

---

谢谢

我不太确定

viewData

代表什么，但我认为您的做法是错误的

使用angular时，不应该从服务器加载html（除非它是一个模板，通过

templateUrl

）

相反，服务器应该返回数据，然后使用模板显示这些数据

例如，对于图像，您可能会从服务器返回如下内容：

[
  {
    name: 'image1',
    url: 'some/url.jpg'
  },
  {
    name: 'image two',
    url: 'some/other/url.jpg'
  }
]

然后，您的html可以有如下内容：

  <img ng-src="image.url" 
       ng-click="showInGallery(image)" 
       alt="{{image.name}}" 
       ng-repeat="image in images"/>

---

我建议您阅读更多关于angular和S（ingle）p（age）A（应用程序）的内容，因为您试图以一种不同于其设计方式的方式使用框架。这意味着您将遇到许多障碍，无法从围绕它的强大社区中获益。

您是否检查过此项：事件绑定也是如此：嗨，Ed，我了解SPA是什么，但请尝试想象一下您在所见即所得编辑器中显示编辑数据的应用程序。。。用户编辑的数据显示在我们的web和移动应用程序上。我无法使用AngularJS指令保存数据。需要类似于我使用jQuery所做的事情-初始化DOM某些部分中的所有图像元素。我可能没有正确理解您，但如果您将HTML添加到已由angular处理的元素中，您可能需要使用angular的

$compile

手动将额外的html链接到作用域以创建链接函数，然后将

$scope

传递到生成的链接函数中。

[
  {
    name: 'image1',
    url: 'some/url.jpg'
  },
  {
    name: 'image two',
    url: 'some/other/url.jpg'
  }
]

  <img ng-src="image.url" 
       ng-click="showInGallery(image)" 
       alt="{{image.name}}" 
       ng-repeat="image in images"/>

app.controller('ImageController', function($scope, imageService){
  imageService.getImages().then( function(images){
    $scope.images = images
  });

  $scope.showInGallery = function(image){

    //your gallery code here.

  }
});