Angualar JS Translate and dynamic elements?

Asked

Viewed 30 times

1

I’m using Angularjs to create a site Multi-lingual, but I’m having problems with the elements created dynamically. 

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

app.config(function($translateProvider) {
    $translateProvider.translations('en', {
         'title': 'title'

    }.translations('pt', {
         'title': 'titulo'
    }

    $translateProvider.preferredLanguage('en');
});

<div ng-app="myApp" id="myDiv">
      <span>{{ 'title' | translate }}</span>
</div>

But if I add a new one span to my div, with for example:

$("#myDiv").append("<span>{{ 'title' | translate }}</span>");

The content of span is not translated with the value of title.

angularjs angular
  • 1

    $() just add content to the DOM. In order for the content to be interpreted by the angular you need to pass it by $compile, adding it to the scope. Example: https://stackoverflow.com/questions/18157305/compiling-dynamic-html-strings-from-database

  • So every time I go to add a new element I must pass it by the Compile?

  • Yes. Internally that’s what Angularjs does with all objects under one scope specific. The solution on the link I passed to you inplementates the compilation as a directive.

No answers

Browser other questions tagged angularjs angular

You are not signed in. Login or sign up in order to post.