angular-foundation and angular-translate: apply translation into attribute back-text
angularjs,zurb-foundation,angular-translate,angular-foundation
If you check the js source code of foundation you will find this piece of code that handles back button if (settings.custom_back_text == true) { $('h5>a', $titleLi).html(settings.back_text); } else { $('h5>a', $titleLi).html('« ' + $link.html()); } $dropdown.prepend($titleLi); So it creates new element and adds to dropdown, result of which is...
JSON to HTML with breaklines, angular-translate
javascript,json,angularjs,angular-translate
Use white-space:pre; in css so it would be like that in your html <h2 style="white-space:pre;"> <span>{{ 'ABOUT.span' | translate }}</span>{{ 'ABOUT.headline' | translate }} </h2> here is a plunker http://plnkr.co/edit/Bjs6LC9Z9Fy1v5ULqlVW?p=preview...
Blank option added for selected option as language changes
html,angularjs,angular-translate
Keep translated name inside tag, but also use un-translated name as value attribute of option. <option ng-repeat="option in options">{{option | translate }} to <option value="{{option}}" ng-repeat="option in options">{{option | translate }} It's not Angular specific http://www.w3schools.com/tags/att_option_value.asp I had same issue and this solved it to me... Plus, set some option...
Use translateProvider.useLoader with Typescript
A silly mistake was not allowing me to retrieve the value of options. The working code is as follows. export class TranslationFilesLoader { public static $inject = ['$http', '$q' ]; constructor( $http: ng.IHttpService , $q: ng.IQService) { return function (options) { var deferred = $q.defer(); var currentLocale = options.key; var...
angular-translate service is not translating for first time
I think I have fixed it this way: $translate.uses(langKey).then(function() { $rootScope.title = $translate('PAGE_TITLE'); }); ...
Localize URL's with ui-router and angular-translate
angularjs,angular-ui-router,angular-translate
I use something along these lines: CoffeeScript angular.module('app') .config([ '$stateProvider' ($stateProvider) -> $stateProvider.state 'app', abstract: true url: '/{locale}' $stateProvider.state 'app.root', url: '' $stateProvider.state 'app.root.about', url: '/about' ]) JavaScript angular.module('app').config([ '$stateProvider', function($stateProvider) { $stateProvider.state('app', { abstract: true, url: '/{locale}' }); $stateProvider.state('app.root', { url: '' }); return $stateProvider.state('app.root.about', { url: '/about' });...
Using angular-translate's $translate.use() in the ui-router config file
javascript,angularjs,angular-ui-router,angular-translate
Solution here would be to move the DI definition of the '$translate' - where it belongs, i.e. into controller definition: .state('language', { // instead of this // controller: function() { // use this controller: function($translate) { console.log('ok'); $translate.use(($translate.use() === 'fr') ? 'en' : 'fr' ); } }); or even better...
angular-translate module 'pascalprecht.translate' not found
javascript,angularjs,internationalization,angular-translate
It was failing because of another dependency throwing an error, specifically jquery.easy-pie-chart. I wasn't using that dependency at all so I removed it and angular-translate started working without a problem.
AngularJS inject $http into config for angular-translate
angularjs,angular-translate,angularjs-provider
So angular-translate provides it's own $http process to do this. I happened to literally just implement this today, so you're in luck. You can see it here in their docs. http://angular-translate.github.io/docs/#/api/pascalprecht.translate.$translateUrlLoader Their docs are pretty bad, but the way you would implement this is in your app.config where you have...
Is there a way I can automate the creation of .json files used for language translations?
javascript,json,angularjs,powershell,angular-translate
You could write something like this in powershell: $masterFile = "locale-en.json" function Get-LocaleMap($file){ $map = @{} $localeJson = ConvertFrom-Json (gc $file -Raw) $localeJson | gm -MemberType NoteProperty | % { $map.Add($_.Name, ($localeJson | select -ExpandProperty $_.Name)) } return $map } $masterLocale = Get-LocaleMap $masterFile ls | ? { $_.Name -like...
Start Angular.js route-segment or ui-router after all translations are loaded
javascript,angularjs,angular-ui-router,angular-translate
Try to check the native, built-in feature: $urlRouterProvider.deferIntercept(defer) Disables (or enables) deferring location change interception. If you wish to customize the behavior of syncing the URL (for example, if you wish to defer a transition but maintain the current URL), call this method at configuration time. Then, at run time,...
Internationalization i18n with NodeJS and AngularJS
node.js,angularjs,express,internationalization,angular-translate
This should work: $scope.lang = yourActiveLanguage; .... {{ restaurant['description_' + lang] }} ...
Angular-translate: Set custom loader option from controller
angular-translate allows you to use any service as a loader as long as it meets a desired interface. But it doesn't restrict you in ways of how you pass additional parameters to the loader. So, you may pass them just like you want. For example, you can set additional parameters...
Setting cookie for AngularJS translate locale using PHP
php,angularjs,symfony2,angular-translate
Set the cookie via PHP: <?php setcookie("_locale", "en"); ?> and retrieve it from angular with ngCookies: angular.module('app', ['ngCookies']) .controller('ExampleController', ['$cookies', function($cookies) { // Retrieving the cookie var locale = $cookies.get('_locale'); // Do something with locale }]); ...
AngularJS: Browser ignores my Controller Definition (Dependency Injection)
javascript,angularjs,angular-translate
var app = angular.module('ngApp', ['pascalprecht.translate']); // this code works app.config(['$translateProvider', function ($translateProvider) { $translateProvider.translations('en', { TITLE: 'Hello' }); $translateProvider.translations('de', { TITLE: 'Hallo' }); $translateProvider.preferredLanguage('en'); //or translateProvider.determinePreferredLanguage() }]); // the browser ignores this code app.controller('orderFormCtr', ['$scope', '$translate', function ($scope, $translate) { alert("Controller Code executed"); }]);...
Using $translateProvider.useUrlLoader
Tale a look at: http://angular-translate.github.io/docs/#/api/pascalprecht.translate.$translateUrlLoader By default it will use the querystring param ?lang= to pass in the desired language. you would use it like: $translateProvider.useUrlLoader("/path/to/my/endpoint"); $translationProvider.defaultLanguage("en"); Angular-translate will then make a call to /path/to/my/endpoint?lang=en If you do not want a query string parameter, but would rather a path parameter,...
Using ui-router to simply launch a function without changing state
javascript,angularjs,angular-ui-router,angular-translate
Based on the problem being how to use ng-repeat for the menu links, one suggestion would be using ng-if to create a different link for language that uses ng-click to manage the switching and not set any href attributes for it Something like <li ng-repeat="item in menu" ui-sref-active="active"> <a ng-if="item.state...
Internationalization of api error messages on front end or back end?
java,angularjs,spring,internationalization,angular-translate
If I had to do this, I would have done it on the back end, primarily because since the backend has the locale, and is also generating the errors, it does make sense to expect localized errors from it. It would also de-couple the systems, such that, if there is...
Angular-translate's localStorage: Unknown provider: $translateLocalStorageProvider
You don't have to add angular-translate-storage-local as dependency to your app.js file. I think that you just forgot to include angular-translate-storage-local package in your html: <script src="bower_components/angular-translate-storage-local/angular-translate-storage-local.min.js"></script> Link to github....
Angular-Translate Partial loader isn't working
Finally I found the solution. The trouble was that the menu is out of ng-view block, and when the app loads doesn't refresh the correct html part. By adding this $translatePartialLoaderProvider.addPart('menu'); .config(function ($translateProvider, $translatePartialLoaderProvider) { $translatePartialLoaderProvider.addPart('menu'); $translateProvider.useLoader('$translatePartialLoader', { urlTemplate: 'translations/{lang}/{part}.json' }); $translateProvider.preferredLanguage('bra'); .... When the application loads the menu part...
AngularJS translation with pluralization using angular-translate
angularjs,translation,angular-translate,pluralize
Angular-translate has service with functionality of MessageFormat which is really powerful and also has built-in locale for lithuanian. Article about MessageFormat and angular-translate. Installing You can install this package via bower: $ bower install angular-translate-interpolation-messageformat After that include necessary scripts with MessageFormat and angular-translate-interpolation-messageformat: <script src="path/to/messageformat.js"></script> <script...
AngularJS translate: Format dynamic dates
angularjs,date,angular-translate
Assuming you have following angular-translate translations definitions: //de "with_date": "German: {{date|date:'short'}}" //en "with_date": "English: {{date|date:'medium'}}" Then inside a view you can do: <h1>{{ 'with_date'|translate:{date:today} }}</h1> Where today is defined in controller i.e.: $scope.today = new Date(); Assuming you've loaded angular-locale_* with correct locale the dates will be formatted in a...
How do I use Angular i18n for languages it doesn't appear to support?
javascript,angularjs,internationalization,locale,angular-translate
Angular supports i18n Standard for location | globalization | internationalization. When it comes to number,dates and so fort for names of days, months, etc. Angular relies on $locale service for example in the case of number the property NUMBER_FORMATS. Here is the list of locations currently supported by angular: http://cdnjs.com/libraries/angular-i18n/...
using angular-translate in controller gives me an object object
Try using $translate.instant('key'); // JS or <b>{{ 'flat' | translate }}</b><br> <!-- HTML --> ...
Directive inside a angular-translate translation
angularjs,angularjs-directive,angular-translate
Try to use the translate-compile directive: <p translate="TEST_2" translate-compile></p> From the docs: Starting with version 2, the translation itself can be post processed in context of the current scope (using $compile). This means any directive used in a translation value itself will now work as expected. ...
angular-translate sanitisation fails with UTF characters
javascript,angularjs,sanitization,angular-translate
At the moment, you have two options: Use the strategy sanitizeParameters which will only sanitize the dynamic parameters, but not the actual translation (template). If you have the translation under control (but not the dynamic values), this will work. Use the strategy escape (or escapeParameters) which does not use sanitization...
How to angular translate ng-model property value?
try this ng-model="project.name|translate" ...
translate angular-ui's pagination text angularjs
javascript,angularjs,pagination,angular-ui-bootstrap,angular-translate
I'm still not sure why i can't ref to the translation module inline the pagination tags but if i inject the translation module into my controller, i can then look up the values an insert them into a scope variable, and then ref to it from html Like shown below...
Is there a way to inject additional keys into translation table
Currently there is a discussion about it at https://github.com/angular-translate/angular-translate/issues/316....
angular-translate: how to reset translation table dynamically in $translationProvider?
angularjs,internationalization,ionic,translate,angular-translate
Providers can only be used during the configuration phase. Once the application runs, only services (created by the providers) are available. But the $translate service has a refresh() method....
Angular Translate doesn't work with multiple translation IDs
Angular translate usage: $translate(translationId[, interpolateParams], interpolationId); translationId [string | array] - A token which represents a translation id This can be optionally an array of translation ids which results that the function returns an object where each key is the translation id and the value the translation. interpolateParams(optional) [object]-An object...
How to nest expressions in AngularJS' views?
Handlebar syntax implies a JavaScript expression, or to be specific, an Angular expression. Using handlebars inside handlebars doesn't make sense because you've already told the compiler you're switching from HTML to JavaScript. That being said, you can just rewrite your expression without the inner handlebars: {{ (userLanguage ? userLanguage.chosenLanguage :...
Angular-Translate Variable Replacement in Title Attribute
javascript,html,angularjs,angular-translate
The following should work: <span title="{{'translationID'|translate:{username:Value} }}">...</span> ...
Good practice with Angular Translate
I am preferring short keys instead of the english text as key.. This will blow up your HTML and your config JS file.. when you use short keys you can also nest keys e.g. { user: { name: 'Name', email: 'E-Mail' } } and use it like this in your...
Unit testing an AngularJS service with angular-translate calls
javascript,angularjs,unit-testing,jasmine,angular-translate
Okay. I guess I figured it out on my own. I started out with the test found here: https://github.com/angular-translate/angular-translate/blob/master/test/unit/service/translate.spec.js#L409 And I was able to slowly morph this passing test into what I wanted to do: (function() { var app = angular.module("theApp", ["pascalprecht.translate"]); var theService = function($translate) { var theFunction =...