Używanie metod pomocniczych podczas szablonowania za pomocą Angular JS

Question

Obecnie trwa proces przekształcania strony internetowej z wcześniejszego szablonu na Angular. W poprzednim procesie szablonowania, z którego korzystaliśmy, byliśmy w stanie wywołać metody pomocnicze w celu prawidłowego wyświetlania danych. Na przykład:

<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> 

To było bardzo miłe. Próbuję znaleźć sposób na wykorzystanie tego samego rodzaju funkcjonalności w Angular, jeśli chodzi o szablon. Czy można zrobić coś podobnego? Jeśli tak to jak?

Answer 1

Po prostu dodaj tę metodę do kontrolera. Coś takiego:

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

Następnie kontroler:

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

Answer 2

Patrząc na prezentowanym przypadku użycia najlepszym wezwanie zostanie opisany filtr data tutaj: http://docs.angularjs.org/api/ng.filter:date Stosując ten filtr można napisać:

{{CreatedDate | date}} 

Wymieniony filtr można dostosować, aby można było używać różnych formatów dat itp.

Ogólnie rzecz biorąc filtry są bardzo dobre do enkapsulacji funkcji logicznych/interfejsu pomocniczego interfejsu użytkownika. Więcej informacji o tworzeniu filtrów: http://docs.angularjs.org/guide/dev_guide.templates.filters.creating_filters

Filtry są ładne i pasują do wielu przypadków użycia, ale jeśli po prostu skorzystasz z dowolnej funkcji w swoim szablonie, to jest to możliwe. Wystarczy zdefiniować funkcję w zakresie i są gotowe do użycia bezpośrednio w szablonie:

{{doSomething(CreatedDate)}} 

gdzie doSomething musi być zdefiniowana w zakresie (prąd jednego lub jeden z zakresów nadrzędnych):

function MyCtrl($scope) { 

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

Answer 3

Jeśli interesuje Cię tylko wyświetlanie danych, a następnie już wspomniane źródło pkozlowski.opensource, filtry są "sposobem kątowym" formatowania danych do wyświetlenia. Jeśli istniejący filtr daty jest niewystarczający, proponuję filtr niestandardowy. Wtedy twój HTML będzie wyglądać bardziej „kanciasty”:

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

Powyższa składnia jasno wynika, że ​​jesteś (tylko) formatowanie.

Oto filtr niestandardowy:

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

Dzięki enkapsulacji Nasze filtry/formatek do modułu, jest także łatwiejsza do (re) wykorzystywać je w wielu kontrolerów - każdego kontrolera, który potrzebuje ich tylko wstrzykuje OurFormatters.

Kolejną zaletą filtrów jest to, że można je przykręcić.Więc jeśli kiedyś zdecydujesz, że w niektórych miejscach w aplikacji pustych dat powinien pokazać nic (jest pusty), podczas gdy w innych miejscach w aplikacji pustych dat powinien pokazać „TBD”, filtr może rozwiązać ten ostatni:

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

lub filtr niestandardowy może trwać jeden lub więcej argumentów (powyższy przykład wspiera argument):

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