Search code examples
angularjsangularjs-directivevisualforceangular-translate

Angular JS translate not working properly inside Visualforce page

I need to translate my HTML into different languages based on user preference. For that, I am using Angular JS translate method. The example when I write inside notepad and saved as ".html" is working fine. But when I pasted the same code inside my Salesforce Visualforce page, its behavior changes.ie. When I click on the button"IT" to translate the content to "Italics" the contents are translating to Italics but within seconds the contents are again going back to their preferred language "EN". I have given below my screenshot of output.

enter image description here

I have given below my code, can anyone say what's wrong in this.

 <!DOCTYPE html>
 <html ng-app="app">
 <head>
 </head>
 <body>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
 <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.5.2/angular-translate.js"></script>
 <script>
 // Code goes here
 var app = angular.module('app', ['pascalprecht.translate']);

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

 $translateProvider.translations('it', {
  'Purchase order': "Ordine di acquisto ",
  'Number:': "Numero:",
  'Customer data': "Dati Cliente",
  'Surname / Company':"Cognome/Società",
  'Name':"Nome",
  'Piazza way':"Via/Piazza",
  'City':"Città",
  'VAT tax code':"Codice Fiscale/Partita IVA",
  'Phone':"Telefono",
  'E-Mail':"E-Mail",
  'CAP':"CAP"


});
$translateProvider.preferredLanguage("en");
 }
]);

app.controller('AppController', function ($translate) {
// this.browser = navigator.userAgent;
 this.useLang = function (lang) {
$translate.use(lang);
}
});
</script>


 <div ng-controller="AppController as app">
 <h3 translate>     Purchase order </h3>
 <p translate>Number:</p>
 <h3 translate>Customer data</h3>
 <p><span translate>Surname / Company</span>_________</p>
 <p> <span translate>Name</span>__________</p>
 <p><span translate>Piazza way</span>____________</p>
 <p><span translate>CAP</span>_______<span translate>City</span>______</p>
 <p><span translate>VAT tax code</span>__________</p>
 <p><span translate>Phone</span>____________</p>
 <p><span translate>E-Mail</span>_________</p>

 <button ng-click="app.useLang('it')">IT</button>
 <button ng-click="app.useLang('en')">EN</button>

 </div>
 </body>
 </html>
Solution

  • After going through the solutions provided in developer forums, finally I found the solution for my problem. Actually the reason behind my content going back to "english" from "italics" is "page refreshing". To stop the page from refreshing I need to set the <button> type as "button".
    ie <button type="button">

    Code change

    <button type="button" ng-click="app.useLang('it')">IT</button> <button type="button" ng-click="app.useLang('en')">EN</button> I did the change in my code and it stopped the page from refreshing, which in turn gave my expected result.