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

Question

我想包含从 ajax 请求加载的 html 数据，并在我的 html 数据中触发图像的点击事件。我知道这在 SPA 世界中是错误的，但我需要显示来自 wysiwyg 编辑器的数据...

这是用 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.

  }
});

我建议您阅读更多有关 angular 和 S(ingle)P(age)A(pplication)s 的信息，因为您正在尝试以不同于设计方式的方式使用框架。这意味着您会遇到很多绊脚石，并且不会从围绕它的伟大社区的力量中受益。