Come estendere o sovrascrivere i filtri esistenti in angularjs?

Question

È possibile estendere i filtri "standard" esistenti (date, number, lowercase ecc.)? Nel mio caso ho bisogno di analizzare la data dal formato YYYYMMDDhhmmss, quindi mi piacerebbe estendere (o sostituire) il filtro date invece di scrivere il mio.

Answer 1

Non sono sicuro di aver compreso correttamente la domanda, ma se si desidera estendere la funzionalità dei filtri esistenti è possibile creare un nuovo filtro che ne decori uno esistente. Esempio:

myApp.filter('customDate', function($filter) { 
    var standardDateFilterFn = $filter('date'); 
    return function(dateToFormat) { 
    return 'prefix ' + standardDateFilterFn(dateToFormat, 'yyyyMMddhhmmss'); 
    }; 
}); 

e poi, nel modello:

{{now | customDate}} 

Detto quanto sopra, se si vuole semplicemente formattare una data in base ad un determinato formato di questo può essere fatto con il filtro della data attuale :

{{now | date:'yyyyMMddhhmmss'}} 

Ecco la jsFiddle lavoro illustrante due tecniche: http://jsfiddle.net/pkozlowski_opensource/zVdJd/2/

Si noti che se un formato non viene specificato, AngularJS presumerà che questo sia formato "medio" (il formato esatto dipende da una locale). Controlla http://docs.angularjs.org/api/ng.filter:date per ulteriori informazioni.

L'ultima osservazione: sono un po 'confuso riguardo alla parte "parse from" della tua domanda. Il fatto è che i filtri sono utilizzati per analizzare un oggetto (data in questo caso) per la stringa e non viceversa. Se si sta analizzando le stringhe (da un input) che rappresentano le date, è necessario esaminare i parser NgModelController # $ (selezionare la parte "Convalida personalizzata" in http://docs.angularjs.org/guide/forms).

Answer 2

preferisco per l'attuazione del decorator pattern, e in realtà in angolare è molto facile ..
Quindi, se prendiamo ad esempio @ pkozlowski.opensource, si può fare qualcosa di simile:

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; 
    }]) 
}]) 

E poi nelle tue visualizzazioni, puoi usare entrambi .. lo standard output e il comportamento esteso.
con lo stesso filtro

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

Ecco la jsFiddle di lavoro che illustra entrambe le tecniche: http://jsfiddle.net/ar8m/9dg0hLho/