Globale Variablen in Winkeln

Question

Ich habe einige Datums-ISO-Zeichenfolgen, die ich in menschenlesbare Daten formatieren möchte. Ich verwende die Bibliothek angular-moment, um diese Daten in meiner Vorlage mithilfe eines Filters zu formatieren.

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

Ich möchte das Format des Datums an die folgende Anzeige anpassen:

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

Also ich dies in meiner Vorlage tun können:

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

Allerdings möchte ich diese dateFormats irgendwo in der Welt zu leben, anstatt ausschließlich innerhalb des Controllers dieser Komponente, da ich in der Lage sein möchte, diese dateFormats in anderen Vorlagen auf der ganzen Linie zu verweisen.

Würde dies als richtiger Anwendungsfall für die Verbindung dateFormats mit $scope gelten oder gibt es einen besseren Weg, damit umzugehen?

Jede Hilfe wird geschätzt. Danke im Voraus!

Answer 1

Sie sollten einen eigenen benutzerdefinierten Filter erstellen. Etwas wie folgt aus:

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

Jetzt können Sie einfach diesen Filter aus jeder Vorlage in Ihrem Modul verwenden:

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

Answer 2

Was ich für Termine tun, ist das Erstellen eines benutzerdefinierten Filter
wie zum Beispiel:

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

Ihr so ​​etwas tun könnte und die amCalendar Filter in Ihrem benutzerdefinierten Filter verwenden. Damit haben Sie den gesamten Code, der das Datum im selben Filter templatiert.

Answer 3

Es gibt keine Notwendigkeit, einen benutzerdefinierten Filter zu erstellen, geben Sie amCalendar in Ihrem Lauf anpassen können Funktion wie in der docs beschrieben.

hier ein funktionstüchtiges Beispiel:

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>