未知提供者：使用 $filter 时的 inputProvider

Question

我已从this 帖子中获取 orderByObject 过滤器。但我不断收到此错误：

Error: [$injector:unpr] Unknown provider: inputProvider <- input <- orderObjectByFilter
http://errors.angularjs.org/1.3.17/$injector/unpr?p0=inputProvider%20%3C-%20input%20%3C-%20orderObjectByFilter
minErr/<@http://localhost:3000/bower_components/angular/angular.js:63:12
createInjector/providerCache.$injector<@http://localhost:3000/bower_components/angular/angular.js:4031:19
getService@http://localhost:3000/bower_components/angular/angular.js:4178:39
createInjector/instanceCache.$injector<@http://localhost:3000/bower_components/angular/angular.js:4036:28
getService@http://localhost:3000/bower_components/angular/angular.js:4178:39
invoke@http://localhost:3000/bower_components/angular/angular.js:4210:1
enforcedReturnValue@http://localhost:3000/bower_components/angular/angular.js:4072:20
invoke@http://localhost:3000/bower_components/angular/angular.js:4219:14
createInjector/instanceCache.$injector<@http://localhost:3000/bower_components/angular/angular.js:4037:20
getService@http://localhost:3000/bower_components/angular/angular.js:4178:39
$FilterProvider/this.$get</<@http://localhost:3000/bower_components/angular/angular.js:16724:14
FundController/</<@http://localhost:3000/app/fund/fund.controller.js:24:28
processQueue@http://localhost:3000/bower_components/angular/angular.js:13300:27
scheduleProcessQueue/<@http://localhost:3000/bower_components/angular/angular.js:13316:27
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost:3000/bower_components/angular/angular.js:14555:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:3000/bower_components/angular/angular.js:14371:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:3000/bower_components/angular/angular.js:14660:13
done@http://localhost:3000/bower_components/angular/angular.js:9734:36
completeRequest@http://localhost:3000/bower_components/angular/angular.js:9924:7
requestLoaded@http://localhost:3000/bower_components/angular/angular.js:9865:1
angular.js (line 11707)

这是我定义过滤器的方式：

(function() {
    'use strict';

    angular
        .module('app')
        .filter('orderObjectBy', orderObjectBy);


    function orderObjectBy(input, attribute) {
        console.info("orderObjectBy filter");
        if (!angular.isObject(input)) return input;

        var array = [];
        for(var objectKey in input) {
            array.push(input[objectKey]);
        }

        array.sort(function(a, b){
            a = parseInt(a[attribute]);
            b = parseInt(b[attribute]);
            return a - b;
        });
        return array;
    };
  })();

我正在使用这个过滤器，我的控制器是这样的：

vm.getClasses().then(function(data){
    $filter('orderObjectBy')(data.data,'displayOrderEN' ));

});

其中data.data 是来自 $http 休息调用的数据，displayOrderEN 是一个属性。以下是 Json 数据示例：

[
  {
    "fundClassCode": "qqq",
    "displayOrderEN": 18,
    "displayOrderFR": 18
  },
  {
    "fundClassCode": "Aaaa",
    "displayOrderEN": 1,
    "displayOrderFR": 1
  },
  {
    "fundClassCode": "sss",
    "displayOrderEN": 2,
    "displayOrderFR": 2
  },
  {
    "fundClassCode": "dddd",
    "displayOrderEN": 12,
    "displayOrderFR": 12
  }
]

这里是一个笨蛋：http://plnkr.co/edit/EaIJIriq6SG7YPeG7K0g?p=preview

Answer 1

您缺少调用函数 - 创建自定义过滤器时，第二个参数是无参数函数。来源-https://docs.angularjs.org/tutorial/step_09

改为：

.filter('orderObjectBy', function () {
      return orderObjectBy;
 });

或者只是将该函数包含在您的orderObjectBy 中。

Updated Plunker

Answer 2

我怀疑：plnkr

您需要该函数返回 angular 可以使用的函数。 docs

使用外部函数，以便您可以将服务注入过滤器。

function orderObjectBy() {
    return function (input, attribute) {
        console.info("orderObjectBy filter");
        if (!angular.isObject(input)) return input;

        var array = [];
        for(var objectKey in input) {
            array.push(input[objectKey]);
        }

        array.sort(function(a, b){
            a = parseInt(a[attribute]);
            b = parseInt(b[attribute]);
            return a - b;
        });
        return array;
    }
}

还有一个错字：

vm.getClasses().then(function(data){
    $filter('orderObjectBy')(data.data,'displayOrderEN' )); //<--- extra parenthesis

});