Winkelmoment - Gebietsschema mit angepasstem Gebietsschema-Objekt ändern

Question

Ich habe Probleme beim Konfigurieren einer Gebietsschemaänderung in meiner Angular-App. Ich verwende Angular Moment und Moment.js

Zuerst Ich gründe das Gebietsschema auf Englisch in meinem angular.module.config und sofort die relative Zeitobjekt Einstellung wie ich brauche:

  moment.locale('en', { 
       relativeTime: { 
        future: "In %s", 
        past: "%s ago", 
        s: "<1 minute", 
        m: "1 minute", 
        mm: "%d minutes", 
        h: "1 hour", 
        hh: "%d hours", 
        d: "24 hours", 
        dd: "%d days", 
        M: "1 month", 
        MM: "%d months", 
        y: "1 year", 
        yy: "%d years" 
       } 
      }); 

Dies funktioniert wie beabsichtigt,

Jetzt habe ich auch ein gleiches Objekt aber für Deutsch. Ich weiß nicht, wo ich es ablegen soll, denn wenn ich es in der Konfiguration ablege, überschreibt es die englische Konfiguration.

Dann habe ich eine Auswahl Drop-Down in einem Header-Menü-Ansicht mit EN und DE (ich bin schon auf Kleinschreibung für Übersetzungen) in meinem Controller und ich kann nicht scheinen amMoment.changeLocale('de'); zu verbinden, um den Moment Teil zu ändern zu Deutsch, und ich kann nicht scheinen, es mit Moment auch direkt zu aktualisieren.

Wie kann ich das erreichen?

Answer 1

Sie können relativeTime für mehrere Ländereinstellungen nacheinander anpassen, ohne die vorherige Konfiguration zu überschreiben.

Sie können ng-change verwenden, um die Dropdown-Änderung an eine Funktion zu binden, die amMoment.changeLocale für das ausgewählte Gebietsschema aufruft.

Beachten Sie, dass Sie moment-with-locales oder alle erforderlichen Gebietsschemadateien importieren müssen, um Moment mit nicht standardmäßigen Gebietsschemas zu verwenden.

Wenn ich verstanden, was Sie hier erreichen wollen, gibt es ein funktionierendes Beispiel:

angular.module('MyApp',['angularMoment']) 
 
.run(function(){ 
 
    moment.updateLocale('en', { 
 
    relativeTime: { 
 
     future: "In %s", 
 
     past: "%s ago", 
 
     s: "<1 minute", 
 
     m: "1 minute", 
 
     mm: "%d minutes", 
 
     h: "1 hour", 
 
     hh: "%d hours", 
 
     d: "24 hours", 
 
     dd: "%d days", 
 
     M: "1 month", 
 
     MM: "%d months", 
 
     y: "1 year", 
 
     yy: "%d years" 
 
    } 
 
    }); 
 
    moment.updateLocale('de', { 
 
    relativeTime: { 
 
     future : 'in %s', 
 
     past : 'vor %s', 
 
     s : '<ein Minute', 
 
     m : 'ein Minute', 
 
     mm : '%d Minuten' 
 
    } 
 
    }); 
 
}) 
 
.controller('AppCtrl', function($scope, moment, amMoment) { 
 
    $scope.last_update = moment().valueOf(); 
 
    $scope.lang = 'en'; 
 
    
 
    $scope.changeLang = function(){ 
 
    amMoment.changeLocale($scope.lang); 
 
    }; 
 
    $scope.changeLang(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment-with-locales.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-moment/0.10.3/angular-moment.min.js"></script> 
 

 
<div ng-app="MyApp" ng-controller="AppCtrl"> 
 
    {{last_update|amDateFormat:'dddd, MMMM Do YYYY, HH:mm:ss a'}} 
 
    <br/> 
 
    <span am-time-ago="last_update"></span> 
 
    <br/> 
 
    
 
    <select name="singleSelect" ng-model="lang" ng-change="changeLang()"> 
 
    <option value="en">EN</option> 
 
    <option value="de">DE</option> 
 
    </select> 
 
    
 
    {{lang}} 
 
    
 
</div>