CODEWITHSUNDEEP
angularjs
DrewShirts
DrewShirts

Reputation: 157

AngularJS Angular-Translate variable replacement not working

Using angular.min.js (version 1.2.11) and angular-translate.js (v1.1.1 - 2013-11-24), I'd like to be able to pass a scope variable to a stored message. In this example, I'm using the JSON variable 'translations'.

According to my understanding of https://github.com/PascalPrecht/angular-translate/commit/5c27467dc8e8724fa0288ea9ede5e39f54d352ec and http://pascalprecht.github.io/angular-translate/docs/en/#/guide/06_variable-replacement you should be able to do variable replacement with a scope variable. It simply doesn't work for me. I'm not sure why.

index.html:

<!doctype html>
<html ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>
    <script src="http://rawgithub.com/PascalPrecht/bower-angular-translate/master/angular-translate.js"></script>
    <script src="script.js"></script>
  </head>
  <body>

    <div ng-controller="Ctrl">
      <p translate="VARIABLE_REPLACEMENT" translate-values="{ name: 'PascalPrecht'}"></p>
      <p translate="VARIABLE_REPLACEMENT" translate-values="{{foo}}"></p>
      <p translate="VARIABLE_REPLACEMENT" translate-value-name="{{foo}}"></p>
      <p>foo == {{foo}}</p>
    </div>

  </body>
</html>

scripts.js:

var translations = {
  VARIABLE_REPLACEMENT: 'Hi, {{name}}'
};

var app = angular.module('myApp', ['pascalprecht.translate']);

app.config(['$translateProvider', function ($translateProvider) {
  // add translation table
  $translateProvider.translations(translations);
}]);

app.controller('Ctrl', ['$scope', function ($scope) {
  $scope.foo = "lone ranger";
}]);

The end result for the variable replacement of foo ('lone ranger') into 'Hi, {{foo}}' should be 'Hi, lone ranger'.

Plunker example

Any help you can provide would be greatly appreciated.

Upvotes: 2

Views: 5125

Answers (2)

kuldipem
kuldipem

Reputation: 1799

I have also same problem , I tried following , I hope it will work for you....

   app.config(['$translateProvider', function ($translateProvider) {
        $translateProvider.preferredLanguage('en');
        // add traenter code herenslation table
        $translateProvider.translations('en',translations);
    }]);

Upvotes: 1

Pascal Precht
Pascal Precht

Reputation: 8893

As you can read in the docs, this is not supported in angular-translate 1.x

http://angular-translate.github.io/docs/en/#/guide/06_variable-replacement#variable-replacement_custom-translate-value-attributes

Upvotes: 1

Related Questions