JSFiddle - React, Tailwind, and code Playground

by mslocum

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="app" ng-controller="TestCtrl">
    <div>{{welcome | translate}}</div>
    <div>{{bye | translate}}</div>
</div>

JavaScript

var app = angular.module("app",[]);

app.controller("TestCtrl", function($scope, translationService) {
    $scope.welcome = 'WelcomeTo';
    $scope.bye = 'GoodBye';
});

app.service("translationService", function($timeout) {
    var self = this;
    var translations = {"WelcomeTo": "Welcome!!", "GoodBye": "BYE"};
    

    this.getTranslation = function(placeholder) {
        return $timeout(function() {
            return translations;
        }, 1000);
    }
})



app.filter("translate", function($timeout, translationService) {
    

    var isWaiting = false;
    var translations = null;
    
    function myFilter(input) {
        console.log("Filter running");
        
        var translationValue = "Loading...";
        if(translations)
        {
            translationValue = translations[input];
        } else {
            if(isWaiting === false) {
                isWaiting = true;
                translationService.getTranslation(input).then(function(translationData) {
                    console.log("GetTranslation done");
                    translations = translationData;
                    isWaiting = false;
                });
            }
        }
        
        return translationValue;
    };
    
    myFilter.$stateful = true;
    
    return myFilter;
});