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

Question

我想包括从ajax请求加载的html数据，并在我的html数据中触发图像上的click事件。 我了解这在SPA世界中是错误的，但我需要使用所见即所得编辑器显示数据...

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

  $http.get('Help/Help/GetHelp', { params: { helpId: contentKey } }) .success(function(data) { 

                    if (data.success) {

                        // viewData is html from wysiwyg editor
                        $scope.viewData = data.viewData;

                        // HERE is problem because now images isn't in DOM. This is too early
                        angular.element('div#content').find('img').click(function () {
                            // Show image in gallery
                        });
                    } else {
                        $scope.viewData = "";
                    }
             });

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

谢谢！

Answer 1

我不完全确定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"/>

和您的控制器：

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

  $scope.showInGallery = function(image){

    //your gallery code here.

  }
});

我建议您阅读更多关于角度和S （单一） P （年龄） A （重复）的信息，因为您正尝试以一种不同于设计方式的方式来使用框架。 这意味着您将遇到很多绊脚石，而不会受益于周围巨大社区的力量。