CODEWITHSUNDEEP
angularjsfilterdependency-injection
Shailesh Vaishampayan
Shailesh Vaishampayan

Reputation: 1796

Not able to inject filters in Controller for AngularJS

Hi I have just started on Angular. I am using AngularJS 1.2.4. Whenever I try to inject a filter in my controller I get the following error :

Error: error:unpr Unknown Provider Unknown provider: senderReceiverDetailInfoProvider <- senderReceiverDetailInfo <- senderReceiverFilter

Here is my app.js : 

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

Here is my myFilter.js:

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

Here is my controller.js

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

And Finally here is my index.html in which I am trying to use the filter:

  <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>

And finally here are my questions: 1) Why injection is not working? 2) Am i using injected filter correctly(Assuming it is injectede somehow correctly) in my index.html? 3) Also Have I declared filters correctly OR I have to declare them in separate module? If I declare them in separate module then how to inject them? E.g. if I do following instead of what I am doing right now for filter declaration: 

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

and then inject above module in my myapp as dependency as follows:

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

Then how to use/inject the filter defined on module 'myfilters' in controller that I have defined in 'myapp' module?

4) And finally what is the better aproach? declaring filters in entirely spearate module or define it on main module like controller and services?

I know I am not much aware of dependency injection apart from the basic syntax. But I guess thats what I need. Thanks.

Upvotes: 0

Views: 1055

Answers (3)

thomaux
thomaux

Reputation: 19718

The error you're getting is because you are not defining your filter correctly. The filter should return a function. So update your filter to:

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

The way you declared the filter made Angular believe you were looking for dependencies named senderReceiverDetailInfo and info. As those are not defined as Angular assets, Angular will throw an error complaining it can't find a provider for the named asset in your case senderReceiverDetailInfoProvider, which is exactly what the logs state.

In case you want to use the filter in a controller, you can inject the $filter service and then simply call:

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

To answer your last question, you should put all related assets (be it controller, service or filter) in the same module.

Upvotes: 0

Chandermani
Chandermani

Reputation: 42669

The filter that you are using with ng-repeat is this filter https://code.angularjs.org/1.2.15/docs/api/ng/filter/filter

The filter function has to be defined on the scope, simply try:

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

Update: To create your own filter function to filter array, you need to define to do something like

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

senderReceivers is an array

Use the filter as <div ng-repeat="detailInfo in senderReceiverDetail |sendReceive">

Upvotes: 0

Patrick Reck
Patrick Reck

Reputation: 11374

This is how I do it. I have stolen the filter from the 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;
    };
});

Now you will be able to use the filter in your templates like this: {{ myObject.value | reverse }}

Upvotes: 0

Related Questions