How to extend or override existing filters in angularjs?

by

I prefer to implement the decorator pattern, which is very easy in AngularJS.
If we take @pkozlowski.opensource example, we can change it to something like:

 myApp.config(['$provide', function($provide) {
  $provide.decorator('dateFilter', ['$delegate', function($delegate) {
    var srcFilter = $delegate;

    var extendsFilter = function() {
      var res = srcFilter.apply(this, arguments);
      return arguments[2] ? res + arguments[2] : res;
    }

    return extendsFilter;
  }])
}])

And then in your views, you can use both.. the standard output and the extended behavior.
with the same filter

<p>Standard output : {{ now | date:'yyyyMMddhhmmss' }}</p>
<p>External behavior : {{ now | date:'yyyyMMddhhmmss': ' My suffix' }}</p>

Here is a working fiddle illustrating both techniques:
http://jsfiddle.net/ar8m/9dg0hLho/

More Related Contents:

  1. AngularJs $http.post() does not send data
  2. AngularJs: How to check for changes in file input fields?
  3. How to access parent scope from within a custom directive *with own scope* in AngularJS?
  4. Running Angular and AngularJS frameworks side by side
  5. Difference between double and single curly brace in angular JS?
  6. How to deep watch an array in angularjs?
  7. How to preventDefault on anchor tags?
  8. ngModel Formatters and Parsers
  9. Can you change a path without reloading the controller in AngularJS?
  10. AngularJS ng-style with a conditional expression
  11. Rendering directives within $sce.trustAsHtml
  12. How to allow only a number (digits and decimal point) to be typed in an input?
  13. Angularjs Normal Links with html5Mode
  14. How to send csrf_token() inside AngularJS form using Laravel API?
  15. Using ui-router with Bootstrap-ui modal
  16. ng-change get new value and original value
  17. AngularJS watch DOM change
  18. How do I apply an AngularJS directive based on a class set by ng-class?
  19. Why ng-transclude’s scope is not a child of its directive’s scope – if the directive has an isolated scope?
  20. Bind Angularjs to newly created html element dynamically
  21. Recommended way of getting data from the server
  22. Angular JS break ForEach
  23. Why is using if(!$scope.$$phase) $scope.$apply() an anti-pattern?
  24. How to config routeProvider and locationProvider in angularJS?
  25. Angular adds strange options into select element when setting model value
  26. angularjs – ng-switch does not bind ng-model
  27. How to use ng-repeat without an html element
  28. How can I update meta tags in AngularJS?
  29. AngularJS controller inheritance
  30. ui-router dynamic template path

Leave a Comment