atticoos / angular-translate-once

:currency_exchange: Extension of angular-translate for one time bindings

angular-translate-once

angular-translate-once is an extension of angular-translate by introducing one-time bindings for static content.

By default, all of your translations beocme part of the digest cycle and bloat your application's $watch list. You don't really need to observe any changes for things like

• form labels
• input placeholders
• link text/titles
• static copy

These things really only need to bind once. If you're looking to trim any excess watchers from your application, and you use angular-translate, this directive may help you out.

Example Usage

<label translate-once="EMAIL_ADDRESS"></label>
<input type="email" translate-once-placeholder="SAMPLE_EMAIL_ADDRESS" />

<p translate-once="DYNAMIC_CONTENT" translate-values="{standard: 'object'}"></p>

---

This should all look very familiar, the only difference is -once in the directive name, and that the translation will be applied as soon as the directive is linked.

angular-translate-once's Issues

Use of bind polyfill is required for testing of anything that uses angular-translate-once

Looks like unit tests of any code that uses angular-translate-once fail with

TypeError: 'undefined' is not a function (evaluating 'TranslateOnceAttributeDirective.bind(undefined, attribute)')

at line https://github.com/ajwhite/angular-translate-once/blob/master/src/translate-once.js#L16 unless your Function.prototype.bind polyfill is added, which is not ideal for a third party library.

Do you have another strategy of avoiding above error while testing? why use a function that requires a polyfill?

[question] adding tooltip attribute

I was hoping that I could do a translate-once over the tooltip attribute.
So I added tooltip to the ATTRS

ATTRS = ['value', 'title', 'alt', 'placeholder', 'tooltip'],

but even though the translations takes place
<i class="glyphicon glyphicon-chevron-down" ng-click="setView('date')" translate-once-tooltip="DATEPICKER/calendar-monthview/glyph/tooltip" tooltip="switch to Month view"></i>
the tooltip text does not get displayed on the view :-(

I was wondering if you have any insight as to why this does not work?

Thanks for this library

Maybe it is a good idea to add in the header .js files a description of current version in comments

translate-values

Do you support translate-values, when is fill up after initialize with some server call ?

I don't see any $observe in code. You can add this and kill watcher after when value is there.

http://stackoverflow.com/questions/20926503/how-to-stop-observe-in-angularjs

How to use, phantomjs TypeError undefined is not a function bind?

Hi,

in application is it running fine: just loading once.js file ( no angular.module registration)

but when running with phantomas I got issues:
["TypeError: 'undefined' is not a function (evaluating 'TranslateOnceAttributeDirective.bind(undefined, attribute)') - unknown

Support for `translate-namespace`

angular-translate has a translate-namespace directive.

Would it be possible to support this directive with translate-once?

Example:

<div translate-namespace="CONTENT">
  <div>
      <h3 translate-once=".HEADERS.TITLE"></h3>
      <h3 translate-once=".HEADERS.WELCOME"></h3>
  </div>
  <div translate-namespace=".HEADERS">
      <h3 translate-once=".TITLE">.TITLE</h3>
      <h3 translate-once=".WELCOM"></h3>
  </div>
</div>

Support for single variable replacement

Add support for translate-value-[variable] for dynamic content. Angular translate has both directives: translate-values (already supported by translate-once) and translate-value-[variable] (not supported at now by translate-once).

Gracefully handle translation key misses

If a translation key is provided, but doesn't exist in the localization, it should be handled gracefully.

In this situation, if the element has text inside of it, it should leave that text there.

use translate-default for default values if no key is found/unresolved

the translate-default attribute does not work right with translate-once. or should it be used differently?

cheers

Support angular-translate-loader-partial ?

Hi,
I'm using angular-translate-loader-partial since I've got multiple modules.
I've code something like below in my main module angular.config

$translatePartialLoaderProvider.addPart('home');
$translateProvider.useLoader('$translatePartialLoader', {
  urlTemplate: '/i18n/{part}/{lang}.json'
});
$translateProvider.preferredLanguage('en');

and, I'm adding another part in run block of other module
$translatePartialLoader.addPart('contact');

translate-once is not working in the new module that is being loaded.
It's working when I'm putting all translations in the json file specified in my main module angular.config.

Can you help me on this. Thanks in advance.

Translate-one as angular expression

For example i want to optimize this case:

<span translate-once="BUYER" ng-if="deal.getMyRole() == 'BUYER'"></span>
<span translate-once="SELLER" ng-if="deal.getMyRole() == 'SELLER'"></span>

Why I can't use it like below?

<span translate-once="deal.getMyRole()"></span>

Enable $translateOnce on controller level

We have a single-page app that rotates languages. However I would like to use translate-once when this functionality is disabled. Could I invoke it in a controller ie:

myApp.controller('myCtrl', function($translateOnce) { 
    if (myRotatorDisabled) { 
     $translateOnce.enabled(true);
   }
});

Or at least as provider?

myApp.config(function($translateOnceProvider) {
 $translateOnceProvider.enabled();
});

Test the performance gain of the one-time binding

Hey guys,

as discussed with @ajwhite here : angular-translate/angular-translate#738 (comment)

It could be great to test the performance gain of using the one-time binding, that needs to be bound to an HTML element, versus the regular translate filter. The test would be interesting to see if the more heavy HTML would nullify the improvement coming from the one-time binding.

Would be interesting to do a test with 100, 1,000, and 10,000 elements versus filters, invoke a few digest cycles, and see how things look

Thanks,
Jeremy

XSS vulnerability using element.html(translation)

Translate-once is calling element.html(translation), which poses a vulnerability if the key is not in the resource dictionary and contains malicious code (e.g. XSS attack.).

Not getting translation texts when refreshing (using ui-router)

I'll preface all of this by saying that this is our first time working with ui-router, so it could very well be a configuration error on our side. That being said, we're experiencing an issue where whenever the user hits "Refresh" while browsing a child state, the translation texts return blank. Once the user navigates to another state (whether child or parent), then the translations appear. This doesn't happen if the user is on a parent state and hits "Refresh".

I tried changing some of our translate-once attributes to translate to make sure the issue wasn't with translate, but it seems to work with regular translate just fine.

Here's how our app is configured:

angular
    .module("ourApp", ["ui.router", "pascalprecht.translate"])
    .config(["$stateProvider", "$urlRouterProvider", "$translateProvider", 
        function($stateProvider, $urlRouterProvider, $translateProvider) {
        $urlRouterProvider.otherwise("/");

        $stateProvider
           // all the states
        ;

        $translateProvider.useStaticFilesLoader({
            prefix: "./static/lang/locale-",
            suffix: ".json"
        });

        $translateProvider.useSanitizeValueStrategy('escapeParameters');
    }])
    .run(["$translate", function($translate) {
            $translate.use("en_US"); // hardCoded for example purposes
    }]);

Am I missing something? Is this a bug? Any other info I can provide to help resolve the issue?