如何将过滤器传递给Angular中的指令？

Question

与this question类似，我有一个指令，我想在两种不同的情况下使用。我传递了一个可以使用的值，但我也想通过一个过滤器来应用它。这样做的正确语法是什么？

app.directive('showMe', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     value: '=', 
     filter: '=', 
     placeholder: '=' 
    }, 
    templateUrl: 'show-me.html' 
    }; 
}); 

模板：

<input ng-model="value" ng-show="editMode" placeholder="{{placeholder}}" /> 
<p ng-hide="editMode">{{(value | percent)||placeholder}}</p> 

使用：

<show-me value="item.discount" filter="percent" placeholder="0%" /> 

预期的结果：

<input value="25" placeholder="0%" /> 
or 
<p>25%</p> 

Answer 1

你可以在一个基本水平实现这一目标通过使用下面的方法;只需在您的指令控制器中使用过滤器提供程序来解析给定的值。例如：

<my-directive value="1461782417" filter="date"></my-directive> 

在“myDirective”你可以很容易地实现滤波器是这样的：

angular 
    .module('myApp') 
    .directive('myDirective', { 
    restrict: 'E', 
    template: '<span>{{displayValue}}</span>', 
    scope: { 
     value: '=', 
     filter: '=' 
    }, 
    controller: ['$scope', '$filter', function ($scope, $filter) { 
     // Pass the value 
     $scope.displayValue = $filter($scope.filter)($scope.value); 
    }] 
    }); 

Answer 2

.filter('percent', function() { 
     return function (text, length, end) { 
      if (text == null || text == '') text = '0'; 
      text = parseInt(text)/100; 
      return text.toFixed(2); 
    };