CODEWITHSUNDEEP
angularjsinternationalizationangular-translate
Ashish Mishra
Ashish Mishra

Reputation: 94

I18n in angularjs

I18n key:

"step1.download":"{{n0}} Download {{n1}} Some text."

In my html:

<span translate=step1.download translate-values="{ n0: '{{info0}}', n1: '{{info1}}'}"></span>

In my controller:

$scope.download = function(){
        alert("fun executed");
        };
$scope.info0="<button ng-click=download()>";
$scope.info1="</button>";

I am getting an error that download function is not defined, I think because html parsed before angular compilation, so is there any way I can solve this problem. Alternatives solutions are also appreciated.

Upvotes: 0

Views: 627

Answers (2)

Ashish Mishra
Ashish Mishra

Reputation: 94

In html use "translate-compile" like this:

<span translate="step1.download" translate-compile translate-values="{ n0: '{{info0}}', n1: '{{info1}}'}"></span>

Worked with my case, it may depends on what translator you are using.It will work if you use "angular-translate.js".

Upvotes: 0

Maxime Allex
Maxime Allex

Reputation: 11

two things :

  • You put a directive in the translate directive. There is no way your code works because the ng-click will be put in the DOM after angular parse it.
  • It's not a good idea to put HTML as value in the translate directive. The module is make to handle text values and not HTML syntax.

For your problem, you have to make something like this :

{
    "step1.download":"Download",
    "step1.someText":"some text."
}

in your html :

<span>
    <button ng-click="download()">
        {{'step1.download'|translate}}
    </button> 
    {{'step1.someText'|translate}}
</span>

Upvotes: 1

Related Questions