Question

我通过json feed添加了数据，并且数据通过过滤器来整理/添加一些额外的元素，这些都可以正常工作。然而，我添加了一个新的过滤器来查找图像并添加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;)">

点击活动：

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

该日志事件永远不会触发

Answer 1

DOM操作应该在指令内完成，而不是过滤器。您仍然可以在指令中使用过滤器并利用编译阶段，这将导致您的html正确地呈现事件和所有内容。

这里有一个很好的解释他们的差异以及如何使用它们：

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

更新：

好吧，让我们从另一个角色看你的问题，让这更简单。

您要做的是迭代您从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之前使用它来修改初始数组，可以像这样使用它（在filter之后将其添加为ng-repeat）：

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

希望这可以自那以后。

顺便说一句：我不希望你改变你的逻辑或任何东西。这只是为了让您了解差异以及在何处使用它们。

按过滤器添加的ng-click图像不起作用

1 个答案: