使用表达式字符串调用 Angular $filter

Question

我正在尝试通过我存储为元数据的过滤器字符串使用过滤器表达式来调用 $filter。例如，我的过滤器字符串可能如下所示：

var filterForMyValue = "number : 2 | someOtherFilter";

这没问题我正在通过标记调用类似的硬编码过滤器：

<span>{{ somevalue |  number : 2 | someOtherFilter</span>

但是我想以编程方式应用此过滤器。这样做 $filter(myFilterString)(valueToFilter) 是行不通的，因为您不能将过滤器参数或多个链接的过滤器作为单个字符串包含在内。它只允许您传递过滤器名称，然后必须单独传递参数，这是我不想要的，因为这是一个需要将任何过滤器字符串应用于值的通用方法。我认为 $parse 可能会有一些用处，但我找不到任何示例说明它如何与 $filter 结合使用来实现这一点。

Answer 1

我不知道有什么方法可以完全满足您的要求，但我认为 $compile 服务可能会在另一个庄园中提供一些帮助。

var app = angular.module('myApp',[]);

app.filter('myFilter',function(){
  return function(val){

    return val * 2;
  }
});

app.directive('myDirective',function($compile){
  return {
    restrict:'E',
    link: function(scope,element){
      scope.filterForMyValue = "number : 2 | myFilter";
      scope.item = 1.123;
      var format = '<span>{{item |' + scope.filterForMyValue + '}}</span>';
      var compiled = $compile(format)(scope);
      element.append(compiled); 
    }

  }
});

Plunkr

Answer 2

这在 bluetoft 注释行中，使用解析器服务而不是编译可能更近一步。

http://plnkr.co/edit/ZyFZ42XAuuE4tRZbxKqn?p=preview

$scope.item = 1.123;

//Option 1
var filterFn = $parse('item |number:2|myFilter');
console.log(filterFn($scope));

//Option 2
$scope.item = $filter('number')($scope.item, 2);
$scope.item = $filter('myFilter')($scope.item);
console.log($scope.item);

有2个选项。 Option1 使用解析器，选项可能是您可以创建自定义过滤器链服务（这是解析器服务在内部会做的事情，但这更符合您预期的传递模式 input/filters）。

使用表达式字符串调用 Angular $filter

Call Angular $filter using expression string

angularjs

angular-filters