Verwenden von Hilfsmethoden beim Templating mit Angular JS

Question

Derzeit wird eine Website von ihrer vorherigen Templating-Version in Angular konvertiert. Im vorherigen Templating-Prozess konnten wir Hilfsmethoden aufrufen, um Daten korrekt anzuzeigen. Zum Beispiel:

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

Das war sehr nett. Versuchen, einen Weg zu finden, um die gleiche Art von Funktionalität mit Angular zu nutzen, soweit das Templating geht. Ist es möglich, etwas Ähnliches zu tun? Wenn das so ist, wie?

Answer 1

Sie fügen einfach die Methode zu Ihrem Controller hinzu. Etwas wie folgt aus:

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

Dann wird der Controller:

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

Answer 2

Mit Blick auf die präsentierten Anwendungsfall die beste Aufruf der Datumsfilter hier beschrieben werden würde: http://docs.angularjs.org/api/ng.filter:date diesem Filter Sie schreiben könnte:

{{CreatedDate | date}} 

Der angegebene Filter ist anpassbar, so dass Sie verschiedene Datumsformate usw. verwenden können.

Generell sind Filter sehr gut zum Einkapseln von Formatierungslogik/UI-Hilfsfunktionen geeignet. Weitere Informationen zum Erstellen von Filtern finden Sie hier: http://docs.angularjs.org/guide/dev_guide.templates.filters.creating_filters

Filter sind nett und passen zu vielen Anwendungsfällen, aber wenn Sie einfach nach der Verwendung einer Funktion in Ihrer Vorlage sind, ist es möglich. Definieren Sie einfach eine Funktion in einem Umfang und Sie sind bereit, es in der Vorlage direkt verwenden:

{{doSomething(CreatedDate)}} 

wo doSomething auf einem Umfang definiert werden muss (eine aktuelle oder eine der übergeordneten Bereiche):

function MyCtrl($scope) { 

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

Answer 3

Wenn Sie nur an der Datenanzeige interessiert sind, dann sind Filter, wie pkozlowski.opensource bereits erwähnt, die "Winkelmethode" zum Formatieren von Daten für die Anzeige. Wenn der vorhandene Datumsfilter nicht ausreicht, empfehle ich einen benutzerdefinierten Filter. Dann wird Ihr HTML aussehen „eckig“:

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

Die obige Syntax macht deutlich, dass Sie (nur) Formatierung.

Hier ist ein benutzerdefinierten Filter:

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

Durch unsere Filter/Formatierer in ein Modul einkapseln, ist es auch einfacher, (wieder) zu verwenden, sie in mehrere Controller - jeden Controller, die sie gerade injiziert OurFormatters braucht.

Ein weiterer Vorteil von Filtern ist, dass sie verkettet werden können.Also, wenn Sie einen Tag entscheiden, dass nichts an einigen Stellen in der App sollten leer Daten zeigen (leer), während in anderen Orten in der App sollten leer Daten zeigen ‚TBD‘, könnte ein Filter, um die letztere lösen:

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

oder Ihre benutzerdefinierten Filter ein oder mehr Argumente annehmen kann (das obige Beispiel unterstützt ein Argument):

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