CODEWITHSUNDEEP
angularjsinternationalizationinterpolation
kornfridge
kornfridge

Reputation: 5200

Add another custom interpolator in Angularjs

I still want {{1+2}} to be evaluated as normal. But in addition to the normal interpolator, I want to create a custom one that I can program to do whatever I want.

e.g. <p>[[welcome_message]]</p> should be a shortcut for <p>{{'welcome_message' | translate}}</p>, or <p translate="welcome_message"></p>. That way, i18n apps would be much more convenient to write.

Is anything like that possible? I'm currently going through the angular.js source code, but the interpolation system looks pretty complicated(?). Any suggestions?

Upvotes: 0

Views: 2387

Answers (2)

kornfridge
kornfridge

Reputation: 5200

I created a directive that regex-find-replaces it's innerHTML. Basically, I can rewrite any text into any other text. Here's how I did it:

How do I make angular.js reevaluate / recompile inner html?

Now all I have to do is to place my directive-attribute, "autotranslate", in one of the parent elements of where I want my interpolator to work, and it rewrites it however I want it! :D

<div class="panel panel-default" autotranslate>
  <div class="panel-heading">[[WELCOME]]</div>
  <div class="panel-body">
    [[HELLO_WORLD]
  </div>
</div>

becomes

<div class="panel panel-default" autotranslate>
  <div class="panel-heading"><span translate="WELCOME"></span></div>
  <div class="panel-body">
    <span translate="HELLO_WORLD"></span>
  </div>
</div>

which does exactly what I wanted.

Upvotes: 2

Joseph Silber
Joseph Silber

Reputation: 220146

I don't think that's possible, but if you really want to save some characters you could create a function on your rootScope called t, then call it within your views:

<p>{{ t(welcome_message) }}</p>

Upvotes: 1

Related Questions