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

Using a Angular filter as a function inside a directive

本文关键字：过滤器 函数 Angular 指令      更新时间：2023-09-26

我有一个函数(shortenNum)，它通过在数字的末尾添加"K"或"M"并去掉零来"缩短"数字。我决定把它变成一个过滤器，因为我使用的是Angular。

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

错误:[$injector:unpr]未知提供商:shortenNumProvider <- shortenNum <- d3PieDirectivehttp://errors.angularjs.org/1.2.10/$喷射器/unpr ? p0 = shortenNumProvider % 20% 3 c - 3 c % 20 shortennum % 20% % 20 d3piedirective…

指令: 

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;
});

First:这就是过滤器应该如何使用吗?

第二:如果是，我的语法/概念错误是什么?

我已经发布了两种使用过滤器的方法:

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);
            })
        }
     }
})
相关文章：