角のグローバル変数

Question

私は人間が読める日付にフォーマットしたい日付のISO文字列をいくつか持っています。私はangular-momentライブラリを使用して、フィルタを使用してテンプレート内でこれらの日付をフォーマットしています。

私は次のように表示される日付のフォーマットをカスタマイズしたい

<span>{{ $ctrl.date | amCalendar:referenceTime:formats }}</span> 

：

const dateFormats = { 
    relative: { 
    sameDay: '[Today at] LT', 
    lastWeek: 'DD MMM, YYYY [at] LT', 
    sameElse: 'DD MMM, YYYY [at] LT' 
    } 
} 

だから私は私のテンプレートでこれを行うことができます。

<span>{{ $ctrl.date | amCalendar:null:dateFormats }}</span> 

しかし、私はそれらのdateFormatsをしたいですこのコンポーネントのコントローラの中だけではなく、グローバルにどこかで暮らすことをお勧めします。他のテンプレートでこれらのdateFormatsを参照したいと思っています。

これはdateFormatsを$scopeに添付するための適切な使用例となりますか、これを処理する良い方法がありますか？

何か助けていただければ幸いです。前もって感謝します！

Answer 1

独自のカスタムフィルタを作成する必要があります。このような何か：

angular 
    .module('myApp') 
    .filter('myDateFormat', ['$filter',function ($filter) { 
     const dateFormats = { 
     relative: { 
      sameDay: '[Today at] LT', 
      lastWeek: 'DD MMM, YYYY [at] LT', 
      sameElse: 'DD MMM, YYYY [at] LT' 
     } 
     } 
     return function() { 
     return $filter('amCalendar')(null, dateFormats) 
     } 
    }]); 

さて、あなたは簡単に自分のモジュール内の任意のテンプレートからこのフィルタを利用することができます：

<span>{{ $ctrl.date | myDateFormat }}</span> 

Answer 2

私は日付のために行うことは例えばとして、カスタムフィルタ
を作成しています：

function ascDateFilter($filter) { 
    return function (input) { 
     return $filter('date')(input, "dd/MM HH:mm:ss"); 
    }; 
} 

あなたはこのような何かをして、カスタムフィルタでamCalendarフィルタを使用することができます。これにより、同じフィルタに日付をテンプレート化するすべてのコードがあります。

Answer 3

カスタムフィルタを作成する必要はありません、あなたは実行でamCalendarをカスタマイズすることができますdocsに記載されているように機能する。このリンクthis.refer行うには（シングルトンである）定数を使用することができます

angular.module('MyApp',['angularMoment']) 
 
.run(function(){ 
 
    const dateFormats = { 
 
    calendar: { 
 
     sameDay: '[Today at] LT', 
 
     lastWeek: 'DD MMM, YYYY [at] LT', 
 
     sameElse: 'DD MMM, YYYY [at] LT' 
 
    } 
 
    } 
 
    moment.updateLocale('en', dateFormats); 
 
}) 
 
.controller('AppCtrl', function($scope) { 
 
    $scope.date = new Date(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-moment/1.0.1/angular-moment.min.js"></script> 
 

 
<div ng-app="MyApp" ng-controller="AppCtrl"> 
 
    <span>{{ date | amCalendar }}</span> 
 
</div>