ng-click通過過濾器添加到圖像無法正常工作

我有通過json提要添加數據，並且數據通過過濾器來整理它/添加一些額外的元素，所有工作正常。不過，我已經添加了一個新的過濾器來查找圖像，並添加ng單擊標記來做全屏模態圖像，令人討厭的是點擊事件從不會觸發。ng-click通過過濾器添加到圖像無法正常工作

.filter('html_filters', function ($sce) { 
     return function (text) { 
      var htmlObject = document.createElement('div'); 
      htmlObject.innerHTML = text; 

      var imgs = htmlObject.getElementsByTagName('img'); 
      for (var i = 0; i < imgs.length; i++) { 
       var link = imgs[i].getAttribute('src'); 
       imgs[i].setAttribute('ng-click', 'loadImage("' + link + '")'); 
      } 

      return $sce.trustAsHtml(htmlObject.outerHTML); 
     } 
    })

HTML：

<p class="postcon arrow-list" ng-if="content" ng-bind-html="content | html_filters"></p>

渲染HTML：

<img class="aligncenter" src="http://www.sdssdsdsdsd.co.uk/connect/wp-content/uploads/2016/08/sdsdsd-August-20162-1.jpg" alt="Exhibit 1" ng-click="loadImage(&quot;http://www.sdssdsdsdsd.co.uk/connect/wp-content/uploads/2016/08/sdsdsd-August-20162-1.jpg&quot;)">

Click事件：

$scope.loadImage = function (url) { 
     console.log("Loading Image"); 
    }

該日誌事件永遠不會觸發

來源

2016-12-06 TMB87

此工作必須使用指令而不是過濾器完成。任何使用數據創建/更新/刪除DOM必須使用指令處理。 –

正如所述的DOM操作是爲指令做和綁定動態創建的HTML你還需要使用'$ compile'，你可以[檢查這個問題]（http://stackoverflow.com/questions/19267979/ng-點擊不工作從動態生成HTML）爲例。 – GillesC

您似乎也有一個編碼問題'"'而不是正確的引用會在點擊處理程序嘗試運行時產生更多錯誤。 – GillesC

DOM操作應該在指令內完成，而不是過濾器。你仍然可以在指令中使用一個過濾器，並利用編譯階段，這將導致你的html被正確渲染事件和一切。

這裏是他們的差的一個很好的解釋，以及如何使用它們：

http://www.c-sharpcorner.com/UploadFile/cd7c2e/directive-and-filter-service-in-angularjs/

UPDATE：

好吧，讓我們稍稍簡化，通過從不同的天使看到你的問題。

你要做的是迭代你從json feed得到的對象列表，並創建一堆html元素（p和img和...）。

我會用ng-repeat（這是一個指令嗎？）寫這篇文章：

<div ng-repeat="content in jsonList"> 
    <p class="postcon arrow-list" ng-if="content" ng-bind="content.text"></p> 
    <img class="aligncenter" ng-src="content.url" alt="{{contnt.alt}}" ng-click="loadImage(content.url)"> 
</div>

所以現在我們有我們的組件列表時，頁面呈現。那麼你在這裏整理邏輯會發生什麼。現在是時候看看過濾器了。讓我們假設你有一個過濾器像下面這得到您的列表，並返回渡過了一個：

app.filter('myFilter', function() { 
    return function (jsonList) { 
    var modifiedList = []; 
    //your logic goes here 
    return; 
    }; 
});

現在，如果你想用這個解析HTML，你可以使用它像這樣先修改初始數組（由將它作爲您的ng-repeat後filter）：

<div ng-repeat="content in jsonList | myFilter">

希望這是因爲。

順便說一句：我不希望你改變你的邏輯或任何東西。這只是爲了讓你知道不同之處以及在哪裏使用它們。

來源

2016-12-06 11:41:31 Yaser

對不起，我不太明白，我得到的邏輯，但我不明白我會如何替換一個指令的過濾器，或並排使用它們？ – TMB87

查看更新@Tom – Yaser

ng-click通過過濾器添加到圖像無法正常工作

回答

相關問題