Custom AngularJS filter within a template

Question

Firstly - let me apologise for being a total Angular newbie.

I'm currently working on a new web app and trying to follow a style guide (https://github.com/johnpapa/angular-styleguide)

I've got things working, but at the moment have to declare my filter function in each of my controllers.

I'd like to not have this duplication and have one copy in its own file, but if I do this and try to use it in my templates it isn't recognised.

My filter function is:

(function() {
    'use strict';

    angular
        .module('lfms')
        .filter('includeDeleted', includeDeleted);

    includeDeleted.$inject = ['property', 'includeDeleted'];

    function includeDeleted(property, includeDeleted) {
        if (includeDeleted) {
            return function (item) {
                return true;
            }
        } else {
            return function (item) {
                return !(item[property]);
            }
        }
    }
})();

and I'm trying to use it as follows:

<tr ng-repeat="crew_member_detail in vm.crew_members | filter: vm.includeDeleted('deletedAt', vm.showDeleted) | filter:vm.search | orderBy: predicate:reverse">

If I include the function in my controller (as follows) everything works fine:

(function() {
    'use strict';

    angular
        .module('lfms')
        .controller('CrewController', CrewController);

    CrewController.$inject = ['CrewData', '$filter'];

    function CrewController(CrewData, $filter) {
        var vm = this;
        vm.crew_members = CrewData("");
        vm.showDeleted = false;
        vm.includeDeleted = includeDeleted;

        function includeDeleted(property, includeDeleted) {
            if (includeDeleted) {
                return function (item) {
                    return true;
                }
            } else {
                return function (item) {
                    return !(item[property]);
                }
            }
        }
    }

})();

I've tried removing the "vm." before the filter but still nothing. I presume it's a scoping issue but can't seem to find anything to guide me towards a solution.

I appreciate any help you can give!

Answer 1

You could create a filter service - refer to https://github.com/johnpapa/angular-styleguide#services:

(function() {
    'use strict';

     angular
       .module('app')
       .service('filterSrv', filterSrv);

     function filterSrv() {
           this.includeDeleted = function(property, includeDeleted) {
                if (includeDeleted) {
                    return function (item) {
                        return true;
                    }
                } else {
                    return function (item) {
                        return !(item[property]);
                    }
                }
           }
           // add more filter methods
      }

})();

Then in your controllers inject your filterService:

(function() {
    'use strict';

    angular
        .module('lfms')
        .controller('CrewController', CrewController);

    CrewController.$inject = ['$filter','CrewData', 'filterSrv'];

    function CrewController($filter, CrewData, filterSrv) {
        var vm = this;
        vm.crew_members = CrewData("");
        vm.showDeleted = false;
        vm.includeDeleted = filterSrv.includeDeleted;


    }

})();