각도 js (1.5) 날짜 필터 : 모듈화로 만들기

Question

내 앱에 다양한 템플릿이 뿌려져 있습니다.

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

나는 항상 앱에서 동일한 날짜 형식을 사용합니다.

나는 위의 모듈화 방법을 이해하여 모든 곳에서 똑같은 것을 반복하지 않도록 노력하고 있습니다. I 올바른 방법은 구성 요소를 만든 다음 필요한 곳에서 구성 요소를 사용하는 것입니다. 예 :

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

그러나 올바른 방법인지 또는 서비스/컨트롤러 대신 사용해야하는지 확실하지 않습니다 ...?

The docs

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

하지만 조금 그 사물의 일반적인 계획에 갈 것 곳으로 잃었어요 사용에 대한 언급 (서비스/컨트롤러?).

(이 바보 같은 간단한 질문이 아니면 내가 잘못된 용어를 사용하고 있다면 ... 내가 각도에 새로운 여전히 일을 할 수있는 올바른 방법을 알아 내려고 노력 해요 경우 미리 사과는.)

Answer 1

당신이에 대한 creating a custom filter 생각 했습니까? 그런 다음 모든 인스턴스를 대체 할 수있는 :

{{value.date | myDateFormat}}

을 Heres 예 :

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" 값을 원하는 값으로 변경하십시오. 예컨대 : "dd/MM/yyyy"

각도 국제화의 문서

EN-US 로케일 예 here :

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