如何在遠程加載的數據上捕獲點擊事件並使用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 （重復）的信息，因為您正嘗試以一種不同於設計方式的方式來使用框架。 這意味着您將遇到很多絆腳石，而不會受益於周圍巨大社區的力量。