Angular js (1.5) Datumsfilter: machen es modular

Question

Ich habe dies in verschiedenen verschiedenen Vorlagen in meiner App bestreut.

<span> 
    {{value.date | date : "yyyy-MM-dd HH:mm" : 'PDT'}} PDT 
</span 

Ich verwende immer das gleiche Datumsformat in der gesamten App.

Ich versuche herauszufinden, wie die oben genannten zu modularisieren, so dass ich nicht überall dasselbe wiederholen. I denke, der richtige Weg, um dies zu tun ist, um eine Komponente zu machen und dann nur verwenden, wo immer ich brauche. Z.B.

<formatted-date value="value"></formatted-date> 

aber ich bin mir nicht sicher, ob das der richtige Weg ist oder ob ich stattdessen einen Service/Controller verwenden soll ...?

The docs Erwähnung mit

$filter('date')(date, format, timezone) 

aber ich bin ein wenig verloren, wo die in der allgemeinen Systematik der Dinge gehen würde (Service/Controller?).

(Apologies im Voraus, wenn dies eine dumme einfache Frage ist, oder wenn ich die falsche Terminologie bin mit ... Ich bin neu in Winkel- und immer noch versuchen, den richtigen Weg, um herauszufinden, Dinge zu tun.)

Answer 1

Haben Sie daran gedacht creating a custom filter? Sie könnten dann alle Instanzen ersetzen mit:

{{value.date | myDateFormat}}

Heres ein Beispiel:

app.filter('myDateFormat', ['$filter', function ($filter) { 

    return function (input) { 

     if (input) { 

      // set your dateFormat and timezone here 
      var dateFormat = "yyyy-MM-dd HH:mm"; 
      var timezone = "PDT"; 

      // format your date 
      var formattedDate = $filter('date')(new Date(input), dateFormat, timezone); 

      return formattedDate; 

     }; 

     return ""; 

    }; 

}]); 

Dies ermöglicht es Ihnen das gleiche Datumsformat zu verwenden und leicht in der Zukunft ändern.

Ansonsten, wenn Sie immer schauen, um zu halten die span Tags und PDT Text zu, dann ja, eine Komponente erstellen, die Sie verwenden wieder, wo Sie es brauchen. Sie erreichen dies durch mit einem directive.

Sie können eine Vorlage bereitstellen und den Dienst $filter an Ihre Anweisung übergeben und dort dieselbe Logik ausführen.

Answer 2

Ich denke in diesem Fall können Sie angular i18n verwenden. Wählen Sie einfach eine Gebietsschema-Datei aus angular locale cdn dann ändern Sie, wie Sie möchten, und importieren Sie es in Ihrem Projekt.
Sie können fast alles ändern, einschließlich Filter. Um den Standard-Datumsfilter zu ändern, ändern Sie einfach den Wert von "mediumDate" auf was Sie wollen. z: "dd/MM/yyyy"

Angular i18n docs here

EN-US Locale Beispiel:

'use strict'; 
angular.module("ngLocale", [], ["$provide", function($provide) { 
var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; 
function getDecimals(n) { 
    n = n + ''; 
    var i = n.indexOf('.'); 
    return (i == -1) ? 0 : n.length - i - 1; 
} 

function getVF(n, opt_precision) { 
    var v = opt_precision; 

    if (undefined === v) { 
    v = Math.min(getDecimals(n), 3); 
    } 

    var base = Math.pow(10, v); 
    var f = ((n * base) | 0) % base; 
    return {v: v, f: f}; 
} 

$provide.value("$locale", { 
    "DATETIME_FORMATS": { 
    "AMPMS": [ 
     "AM", 
     "PM" 
    ], 
    "DAY": [ 
     "Sunday", 
     "Monday", 
     "Tuesday", 
     "Wednesday", 
     "Thursday", 
     "Friday", 
     "Saturday" 
    ], 
    "ERANAMES": [ 
     "Before Christ", 
     "Anno Domini" 
    ], 
    "ERAS": [ 
     "BC", 
     "AD" 
    ], 
    "FIRSTDAYOFWEEK": 6, 
    "MONTH": [ 
     "January", 
     "February", 
     "March", 
     "April", 
     "May", 
     "June", 
     "July", 
     "August", 
     "September", 
     "October", 
     "November", 
     "December" 
    ], 
    "SHORTDAY": [ 
     "Sun", 
     "Mon", 
     "Tue", 
     "Wed", 
     "Thu", 
     "Fri", 
     "Sat" 
    ], 
    "SHORTMONTH": [ 
     "Jan", 
     "Feb", 
     "Mar", 
     "Apr", 
     "May", 
     "Jun", 
     "Jul", 
     "Aug", 
     "Sep", 
     "Oct", 
     "Nov", 
     "Dec" 
    ], 
    "STANDALONEMONTH": [ 
     "January", 
     "February", 
     "March", 
     "April", 
     "May", 
     "June", 
     "July", 
     "August", 
     "September", 
     "October", 
     "November", 
     "December" 
    ], 
    "WEEKENDRANGE": [ 
     5, 
     6 
    ], 
    "fullDate": "EEEE, MMMM d, y", 
    "longDate": "MMMM d, y", 
    "medium": "MMM d, y h:mm:ss a", 
    "mediumDate": "MMM d, y", 
    "mediumTime": "h:mm:ss a", 
    "short": "M/d/yy h:mm a", 
    "shortDate": "M/d/yy", 
    "shortTime": "h:mm a" 
    }, 
    "NUMBER_FORMATS": { 
    "CURRENCY_SYM": "$", 
    "DECIMAL_SEP": ".", 
    "GROUP_SEP": ",", 
    "PATTERNS": [ 
     { 
     "gSize": 3, 
     "lgSize": 3, 
     "maxFrac": 3, 
     "minFrac": 0, 
     "minInt": 1, 
     "negPre": "-", 
     "negSuf": "", 
     "posPre": "", 
     "posSuf": "" 
     }, 
     { 
     "gSize": 3, 
     "lgSize": 3, 
     "maxFrac": 2, 
     "minFrac": 2, 
     "minInt": 1, 
     "negPre": "-\u00a4", 
     "negSuf": "", 
     "posPre": "\u00a4", 
     "posSuf": "" 
     } 
    ] 
    }, 
    "id": "en-us", 
    "localeID": "en_US", 
    "pluralCat": function(n, opt_precision) { var i = n | 0; var vf = getVF(n, opt_precision); if (i == 1 && vf.v == 0) { return PLURAL_CATEGORY.ONE; } return PLURAL_CATEGORY.OTHER;} 
}); 
}]);