在指令中使用 Angular 过滤器作为函数答案

【问题标题】：Using a Angular filter as a function inside a directive在指令中使用 Angular 过滤器作为函数
【发布时间】：2014-07-07 00:20:03
【问题描述】：

我有一个函数 (shortenNum)，它通过在数字末尾添加“K”或“M”并去除零来“缩短”数字。我决定把它变成一个过滤器，因为我在 Angular 上。

过滤器/函数必须在指令中应用，而不是在标记中。我在指令中注入了过滤器本身，但是当我尝试使用它时，函数本身会抛出错误：

错误：[$injector:unpr] 未知提供者：shortenNumProvider http://errors.angularjs.org/1.2.10/$injector/unpr?p0=shortenNumProvider%20%3C-%20shortenNum%20%3C-%20d3PieDirective...

指令：

myApp.directive('d3Pie', [
  '$window', 
  'd3Service', 
  'shortenNum',
  function($window, d3Service, shortenNum) {
  return {
    ...

  // eventually call
  return shortenNum(d.data.count);

过滤器：

// Rewrites a given number in a shorthand form
myApp.filter('shortenNum', function(num) {
  if(num > 99999) { return (num/1000000).toFixed(1) + 'M'; }
  if(num > 999) { return (num/1000).toFixed(1) + 'K'; }
  return num;
});

第一：这就是过滤器的使用方式吗？

第二：如果是这样，我的句法/概念错误是什么？

【问题讨论】：

过滤器声明在哪里？似乎无效，因为错误与注入它有关
哎呀，我需要一个过滤器声明？这就像注入指令中的$filter 一样吗？
添加了我的过滤器，不知道你在问什么...
@zelliott 将$filter 服务本身注入到您的d3Pie 指令中，然后您可以以$filter('shortenNum')(array, expression, comparator) 的形式调用您的shortenNum 过滤器。
filter() 应该真正返回一个函数。在此处查看文档教程中的示例过滤器docs.angularjs.org/tutorial/step_09

标签： javascript angularjs angularjs-directive angular-filters

【解决方案1】：

我在这个小提琴中发布了两种使用过滤器的方法：

http://jsfiddle.net/9Ymvt/1844/

在指令或服务中使用过滤器是完全可以接受的，但您需要将过滤器注入指令中。你可以注入$filter，但本着只需要你需要的东西的精神，最好像这样注入单个过滤器：

angular.module('components', [])
    .directive('controllerFilter', function (shortNumFilter) {
    return {
        restrict: 'E',
        scope:{
            num:'@'
        },
        template: '<span>controllerFilter: {{ filteredNum }}</span>',
        controller: function ($scope, $element, $attrs) {
            $scope.$watch('num', function(newVal, oldVal) {
                $scope.filteredNum = shortNumFilter(newVal);
            })
        }
     }
})

【讨论】：