Coleção AngularJs Meetup South London | Este artigo

Neste protocolo iremos implementar um suporte rtl básico. Vamos definir um sinalizador para usar em nossas classes css usando a mesma abordagem usada pela Modernizr . Você pode verificar o protocolo anterior para obter mais detalhes sobre a configuração inicial aqui .

Criação de uma função de sinalizador RTL

//language module
angular.module('myapp.language', ['pascalprecht.translate'])

.config(function($httpProvider, $translateProvider) {
   ... //seen before
})

// Service definition
.factory('Language', function ($translate) {
    //add the languages you support here. ar stands for arabic
    var rtlLanguages = ['ar'];

    var isRtl = function() {
        var languageKey = $translate.proposedLanguage() || $translate.use();
        for (var i=0; i<rtlLanguages.length; i+=1) {
            if (languageKey.indexOf(rtlLanguages[i])>-1) 
                return true;
        }
        return false; 
    };

    //public api
    return {
        isRtl: isRtl
    };
});

Mudanças em index.html

Usaremos o sinalizador rtl para adicionar uma classe ao elemento html. Isso será usado posteriormente como parte de um seletor de css.

<html ng-app="myapp" ng-class="{'rtl':Language.isRtl()}">

Mudanças no app.js

Precisamos adicionar a dependência do módulo de linguagem e expor o serviço à página.

angular.module('myapp', [ 
    ... 
    'myapp.language', 
    ...
])
.run(function($rootScope, Language, ...) {
   //make the service available     
   $rootScope.Language = Language;
   ...
});

Uso de CSS

Para aplicar as mudanças direcionadas a diferentes classes ou elementos, use:

.className img { float:right; }
.rtl .className img { float:left; }

MENOS uso

.className { 
     img { float: right; }

     .rtl & { 
       img { float: left; }
     }
}

Atributo dir HTML

Para nos ajudar durante o layout de textos específicos, também podemos definir o atributo de direção do texto. A sintaxe é <element dir="ltr|rtl|auto">. Iremos vinculá-lo ao sinalizador anterior para configurar todo o aplicativo. Ao definir este atributo, o navegador tenta obter o resultado desejado na maioria dos casos.

<html ng-app="myapp" ... dir="{{(Language.isRtl())?'rtl':'ltr'}}">

Recursos

Localidades angulares com suporte

Código de demonstração: link