Angular js（1.5）日期過濾器：使其成爲模塊

Question

我有這灑灑在我的應用程序中的各種不同的模板。

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

我會在整個應用程序中始終使用相同的日期格式。

我想弄清楚如何模塊化上述，這樣我就不會在任何地方重複同樣的事情。我想認爲這樣做的正確方法是製作一個組件，然後在需要的地方使用它。例如。

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

但我不知道如果這是正確的方式，或者如果我應該使用服務/控制器，而不是...？

The docs使用

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

，但我有點失去了在何處，將在事物的總體方案去提（服務/控制器？）。

（提前道歉，如果這是一個愚蠢的簡單的問題，或者如果我使用了錯誤的術語......我新的角度，仍然試圖找出做事的正確方法。）

Answer 1

你有沒有想過creating a custom filter？然後，您可以將其替換所有實例：

{{value.date | myDateFormat}}

這裏有一個例子：

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

    }; 

}]); 

這將使您能夠使用相同的數據格式，並很容易地改變它的未來。

否則，如果你正在尋找始終保持span標籤和PDT文字太，那麼，建立在你需要它，你可以重複使用的組件。您可以通過使用directive來實現此目的。

您可以提供一個模板並將$filter服務傳遞給您的指令，並在那裏執行相同的邏輯。

Answer 2

我認爲在這種情況下你可以使用角度i18n。 只需從angular locale cdn中選擇一個區域設置文件，然後根據需要進行更改並將其導入到項目中。
您可以更改幾乎所有內容，包括過濾器。 要更改默認日期篩選器，只需將"mediumDate"的值更改爲所需的值即可。 e.g："dd/MM/yyyy"

角國際化文檔here

EN-US區域設置例如：

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