CODEWITHSUNDEEP
angularjsangularjs-scopeangular-translate
steve
steve

Reputation: 3463

Angular Translate Parent Scope

Perhaps I am missing something, but as good as ng-translate is I dont understand why they chose to use a child scope instead of inheriting the parent scope.

Given the following setup example :-

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

app.config(['$translateProvider',
  function($translateProvider) {
    $translateProvider.preferredLanguage('en');

    $translateProvider.translations('en', {
      'HELLO': 'Hello {{name}}, how are you?'
    });
  }
]);

app.run(['$translate',
  function($translate) {
    $translate.use('en');
  }
]);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'Angular';
});

ng-translate forces the following html, making use of "translate-values" to specify scope interpolation :-

  <body ng-controller="MainCtrl">
    <p translate translate-values="{name: name}">HELLO</p>
  </body>

but what I really want to just say "translate" and leave the parent scope to interpolate name correctly like :-

  <body ng-controller="MainCtrl">
    <p translate>HELLO</p>
  </body>

but that doesnt work.

I know it seems petty, but is there anyway to tell ng-translate to use parent scope and avoid the use of "translate-values" instead of creating child scopes (or is that even the problem??)

Upvotes: 1

Views: 949

Answers (2)

Marcus Riemer
Marcus Riemer

Reputation: 7698

I managed to get the {{ value }} syntax to work in translation strings by passing the translate filter a context to use. It's perfectly possible to use this as context which would result in a HTML fragment like the following: the <p>{{ 'TEXT_ID' | translate:this }}</p>.

Upvotes: 1

steve
steve

Reputation: 3463

Ok, found the answer .. use "translate-compile" and it will use parent scope, so html is

<body ng-controller="MainCtrl">
  <p translate translate-compile>HELLO</p>
</body>

with the only other change required is to use ng-bind instead of {{ }} ..

app.config(['$translateProvider',
  function($translateProvider) {
    $translateProvider.preferredLanguage('en');

    $translateProvider.translations('en', {
      'HELLO': 'Hello <span ng-bind="name"/>, how are you?'
    });
  }
]);

Not sure why {{ }} does not work in this scenario.

Upvotes: 2

Related Questions