Question

假设我有以下svg元素

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

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

Answer 1

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

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

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

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

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

将'this'对象传递给角度滤镜

1 个答案: