将“this”对象传递给角度过滤器答案

【问题标题】：Pass 'this' object to an angular filter将“this”对象传递给角度过滤器
【发布时间】：2017-11-14 15:39:41
【问题描述】：

假设我有以下 svg 元素

<svg>
   <text ng-bind-html="input | filter:arg" >this is a txt<text>
</svg>

我想使用过滤器来更新这个text 元素并添加更多 <tspan> 给它。为此，我需要将this 传递给我的过滤器，以便它使用javascript 附加到元素。我该如何做到这一点？你如何将this element 传递给角度过滤器？

【问题讨论】：

"this" 你的意思是控制器作用域？
"this" 表示<text> 对象

标签： angularjs svg filter

【解决方案1】：

我认为更好的方法是使用属性类型directive

在你的情况下，你可以写这样的东西

<svg>
  <text custom-bind-html="{{input}}" filter="{{args}}">this is a txt<text>
</svg>

这样，您可以通过attrs 和指令上的元素访问input 和args 模型。

myApp.directive('customBindHtml', function ($sce) {
  'use strict';
   return {
    restrict: 'A',
    scope: {},
    link: function (scope, element, attrs) {
      function applyFilter(input, filter) {
          // modify your input with filter and return it trusted by $sce
          return $sce.trustAsHtml(input);
      }
      var output = applyFilter(attrs.customBindHtml, attrs.filter);
      angular.element(element).html(output);
    }
  };
});

$sce 提供程序让您保护内容以避免信任策略错误（默认启用）

JSFiddle example

【讨论】：