Question

您好我刚开始使用Angular。我正在使用AngularJS 1.2.4。每当我尝试在控制器中注入过滤器时，都会出现以下错误：

错误：错误：unpr未知提供商未知提供商： senderReceiverDetailInfoProvider＆lt; - senderReceiverDetailInfo＆lt; - senderReceiverFilter

这是我的app.js：

    var myApp = angular.module("myapp", []);

这是我的myFilter.js：

    myApp.filter('senderReceiver',function(senderReceiverDetailInfo,index){
              conole.log("i",index);
           if(senderReceiverDetailInfo.description != ''){
                    return true;
           }else{
                    return false;
           }
    });

这是我的controller.js

      myApp.controller("myCtrl",'$scope','$http','PaymentService','senderReceiverFilter',
    function($scope,$http,PaymentService,senderReceiverFilter){
            $scope.sendReceiveFilter = senderReceiverFilter;
  }]);

最后这是我的index.html，我试图使用过滤器：

  <div  ng-repeat="detailInfo in senderReceiverDetail | filter : sendReceiveFilter">
    <label>{{$index + 1}}.</label><label>Type : {{detailInfo.lineType}}</label>&nbsp;&nbsp;
     <label>Description : {{detailInfo.description}}</label> 
   </div>                
                            </div>

最后这是我的问题： 1）为什么注射不起作用？ 2）我在index.html中正确使用注入过滤器（假设它在某种程度上是正确的） 3）我是否正确地声明了过滤器或者我必须在单独的模块中声明它们？如果我在单独的模块中声明它们，那么如何注入它们？例如。如果我关注而不是我现在正在做的过滤器声明：

    angular.module('myfilters',[]).filter('senderReceiver',function(senderReceiverDetailInfo,index){
              conole.log("i",index);
           if(senderReceiverDetailInfo.description != ''){
                    return true;
           }else{
                    return false;
           }
    });

然后将我的myapp上面的模块注入依赖关系，如下所示：

      angular.module('myapp',['myfilters']);

然后如何使用/注入在模块＆＃39; myfilters＆＃39;上定义的过滤器。在我已经在＆＃39; myapp＆＃39;中定义的控制器中模块？

4）最后什么是更好的方法？在完全spearate模块中声明过滤器或在主模块上定义它，如控制器和服务？

我知道除了基本语法之外，我不太了解依赖注入。但我想那就是我需要的东西。感谢。

Answer 1

我就是这样做的。我从 AngularJS filter documentation 中窃取了过滤器。

var MyApp = angular.module('myapp',[]);

MyApp.filter('reverse', function() {
    return function(input, uppercase) {

        input = input || '';
        var out = "";

        for (var i = 0; i < input.length; i++) {
            out = input.charAt(i) + out;
        }

        if (uppercase) {
            out = out.toUpperCase();
        }

        return out;
    };
});

现在，您可以在模板中使用过滤器，如下所示：{{ myObject.value | reverse }}

Answer 2

与ng-repeat一起使用的过滤器是此过滤器https://code.angularjs.org/1.2.15/docs/api/ng/filter/filter

必须在范围内定义过滤器功能，只需尝试：

$scope.sendReceiveFilter = function(senderReceiverDetailInfo,index){
              conole.log("i",index);
           if(senderReceiverDetailInfo.description != ''){
                    return true;
           }else{
                    return false;
           }
    }

更新：要创建自己的过滤器函数来过滤数组，您需要定义以执行类似

的操作

myApp.filter('senderReceiver', function () {
    function (senderReceivers, index) {
        var filteredsenderReceivers = [];
        // Fill the above array with filtered values from senderReceivers array
        return filteredsenderReceivers
    }
});

senderReceivers是一个数组

将过滤器用作 <div ng-repeat="detailInfo in senderReceiverDetail |sendReceive">

Answer 3

您获得的错误是因为您没有正确定义过滤器。过滤器应返回一个函数。因此，请将过滤器更新为：

myApp.filter('senderReceiver', function(){
    return function(senderReceiverDetailInfo,index){
        console.log("i",index);
        if(senderReceiverDetailInfo.description != ''){
            return true;
        }else{
            return false;
        }
    };    
});

您声明过滤器的方式使Angular相信您正在寻找名为senderReceiverDetailInfo和info的依赖项。由于那些没有被定义为Angular资产，因此Angular会抛出一个错误，抱怨它无法在您的案例senderReceiverDetailInfoProvider中找到指定资产的提供者，这正是日志所声明的内容。

如果您想在控制器中使用过滤器，可以注入$filter service，然后只需调用：

$filter('senderReceiver')(senderReceiverDetailInfo,index);

要回答上一个问题，您应该将所有相关资产（无论是控制器，服务还是过滤器）放在同一个模块中。

无法在Controller for AngularJS中注入过滤器

3 个答案: