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

时间:2015-09-02 14:08:14

标签: json angularjs angular-filters

我从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 rest call的数据,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

2 个答案:

答案 0 :(得分:3)

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

更改为:

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

或者只是在orderObjectBy已包含该功能。

Updated Plunker

答案 1 :(得分:2)

我怀疑:plnkr

您需要该函数返回角度可以使用的函数。 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

});