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通过过滤器添加到图像无法正常工作

回答

相关问题