AgularJSBooks/app/directive/lang-swicher/lang-swicher.directive.js

(function(){
    'use strict';
    app.directive('langSwitcher', langSwitcher);
    function langSwitcher(){
        return {
            restrict: 'E',
            templateUrl: './app/directive/lang-swicher/lang-swicher.template.html',
            scope: {},
            controller: ['$scope', '$translate', '$rootScope', function($scope, $translate, $rootScope){
                $scope.languages = [
                    {key: 'en', value: 'English'},
                    {key: 'ru', value: 'Russian'}
                ];
                $scope.showMenu = false;
                $scope.toggleMenu = function(){
                    $scope.showMenu = !$scope.showMenu
                }
                var key = localStorage.getItem('preferredLanguage') || 'en'
                $scope.currentLang = $scope.languages.filter(function(item){
                    return item.key === key;
                })[0];
                $scope.changeLanguage = function(key){
                    $scope.currentLang = $scope.languages.filter(function(item){
                        return item.key === key;
                    })[0];
                    $scope.showMenu = false;
                    $translate.use(key)
                    localStorage.setItem('preferredLanguage', key);
                    
                    $rootScope.$broadcast('changeLang', key);
                };
                $scope.$on('changeLang', function(event, value){
                    
                    if($scope.currentLang.key !== value ){
                        $scope.currentLang = $scope.languages.filter(function(item){
                            return item.key === value;
                        })[0];
                    }
                })
            }]

        }
    }
})()