Utilizzo dei metodi di supporto durante la creazione di modelli con Angular JS

Question

Attualmente in fase di conversione di un sito Web dal precedente modello a Angolare. Nel precedente processo di template che stavamo usando, siamo stati in grado di chiamare metodi di supporto per visualizzare correttamente i dati. Ad esempio:

<script type="text/javascript"> 
$.views.helpers({ 
    parseDate: function (jsonDate) { 
     if (jsonDate != null) { 
      var newDate = Utils.PrettyDate(Utils.ConvertJsonDateToJsDate(jsonDate)); 
      return newDate; 
     } 
    } 
}); 
</script> 


<div class="post-info"> 
    <span class="posted-date">Posted {{:~parseDate(CreatedDate)}}</span>&nbsp|&nbsp<span>{{:ReplyCount}} Replies</span> 
</div> 

Questo è stato molto bello. Cercando di capire un modo per utilizzare lo stesso tipo di funzionalità con Angular per quanto riguarda i modelli. È possibile fare qualcosa di simile? Se é cosi, come?

Answer 1

È sufficiente aggiungere il metodo al controller. Qualcosa di simile a questo:

<div class="post-info" ng-controller="MyCtrl"> 
    <span class="posted-date">Posted {{parseDate(CreatedDate)}}</span> 
</div> 

Allora il controllore:

function MyCtrl($scope) 
{ 
    $scope.parseDate = function(jsonDate) { 
     //date parsing functionality 
     return newParsedDate; 
    } 
} 

Answer 2

Guardando il caso d'uso presentato la tua miglior chiamata sarebbe il filtro Data descritto qui: http://docs.angularjs.org/api/ng.filter:date Utilizzando questo filtro si potrebbe scrivere:

{{CreatedDate | date}} 

Il filtro indicato è personalizzabile in modo da poter utilizzare diversi formati di data, ecc.

In generale i filtri sono molto utili per incapsulare la logica di formattazione/le funzioni di supporto dell'interfaccia utente. Maggiori informazioni sulla creazione dei filtri qui: http://docs.angularjs.org/guide/dev_guide.templates.filters.creating_filters

I filtri sono belli e adatti a molti casi d'uso, ma se si è semplicemente dopo aver usato qualsiasi funzione nel modello è possibile. Basta definire una funzione in un ambito e si è pronti ad usarlo direttamente nel modello:

{{doSomething(CreatedDate)}} 

dove doSomething deve essere definito in un ambito (una corrente di uno o uno degli ambiti di madri):

function MyCtrl($scope) { 

    $scope.doSomthing = function(argument){ 
     //ui helper logic here 
    }  
} 

Answer 3

Se si è interessati solo alla visualizzazione dei dati, quindi come pkozlowski.opensource già menzionato, i filtri sono la "modalità angolare" dei dati di formattazione per la visualizzazione. Se il filtro data esistente non è sufficiente, suggerisco un filtro personalizzato. Poi il codice HTML sarà più "angolare":

<span class="posted-date">Posted {{CreatedDate | dateFormatter}}</span> 

La sintassi di cui sopra fa capire che sei (solo) la formattazione.

Ecco un filtro personalizzato:

angular.module('OurFormatters', []). 
filter('dateFormatter', function() {    // filter is a factory function 
    return function(unformattedDate, emptyStrText) { // first arg is the input, rest are filter params 
     // ... add date parsing and formatting code here ... 
     if(formattedDate === "" && emptyStrText) { 
      formattedDate = emptyStrText; 
     } 
     return formattedDate; 
    } 
}); 

Incapsulando nostri filtri/formattatori in un modulo, è anche più facile da (ri) usarli in più controller - ogni controller che ha bisogno di loro solo inietta OurFormatters.

Un altro vantaggio dei filtri è che possono essere concatenati.Quindi, se un giorno si decide che in alcuni posti nella vostra app date vuote dovrebbero mostrare nulla (essere vuoto), mentre in altri luoghi in vostra applicazione date vuote dovrebbero mostrare 'TBD', un filtro potrebbe risolvere quest'ultimo:

<span class="posted-date">Posted {{CreatedDate | dateFormatter | tbdIfEmpty}}</span> 

o il vostro filtro personalizzato può prendere uno o più argomenti (nell'esempio precedente supporta un argomento):

<span class="posted-date">Posted {{CreatedDate | dateFormatter:'TBD'}}</span>