AngularJS : Asynchronously initialize filter

by

Here is an example:

app.filter("testf", function($timeout) {
    var data = null, // DATA RECEIVED ASYNCHRONOUSLY AND CACHED HERE
        serviceInvoked = false;

    function realFilter(value) { // REAL FILTER LOGIC
        return ...;
    }

    return function(value) { // FILTER WRAPPER TO COPE WITH ASYNCHRONICITY
        if( data === null ) {
            if( !serviceInvoked ) {
                serviceInvoked = true;
                // CALL THE SERVICE THAT FETCHES THE DATA HERE
                callService.then(function(result) {
                    data = result;
                });
            }
            return "-"; // PLACEHOLDER WHILE LOADING, COULD BE EMPTY
        }
        else return realFilter(value);
    }
});

This fiddle is a demonstration using timeouts instead of services.

EDIT: As per the comment of sgimeno, extra care must be taken for not calling the service more than once. See the serviceInvoked changes in the code above and the fiddles. See also forked fiddle with Angular 1.2.1 and a button to change the value and trigger digest cycles: forked fiddle

EDIT 2: As per the comment of Miha Eržen, this solution does no logner work for Angular 1.3. The solution is almost trivial though, using the $stateful filter flag, documented here under “Stateful filters”, and the necessary forked fiddle.

Do note that this solution would hurt performance, as the filter is called each digest cycle. The performance degradation could be negligible or not, depending on the specific case.

More Related Contents:

  1. AngularJS : Initialize service with asynchronous data
  2. How can I group data with an Angular filter?
  3. jasmine: Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL
  4. AngularJS – how to get an ngRepeat filtered result reference
  5. ngRepeat Filter by deep property
  6. Produce a promise which depends on recursive promises
  7. apply formatting filter dynamically in a ng-repeat
  8. http request has been block from https
  9. AngularJS routing without the hash ‘#’
  10. Call async/await functions in parallel
  11. Call An Asynchronous Javascript Function Synchronously
  12. How to turn this callback into a promise using async/await?
  13. AngularJS passing data to $http.get request
  14. Angular IE Caching issue for $http
  15. Reactjs async rendering of components
  16. How to find a reason AngularJS “Argument ‘MyCtrl’ is not a function, got undefined”
  17. AngularJS – UI Router – programmatically add states
  18. $watch an object
  19. Failed to instantiate module [$injector:unpr] Unknown provider: $routeProvider
  20. Converting a recursive function into an asynchronous CPS implementation (javascript)
  21. AngularJS CORS Issues
  22. how to bind Bootstrap-datepicker element with angularjs ng-model?
  23. map() function with async/await
  24. Share a single service between multiple angular.js apps
  25. When does async function actually return a pending promise?
  26. AngularJS error: ‘argument ‘FirstCtrl’ is not a function, got undefined’
  27. AngularJS: ng-if not working in combination with ng-click?
  28. Angular ui router – Redirection doesn’t work at all
  29. Validate phone number using angular js
  30. How is AngularJS different from jQuery

Leave a Comment