Angular JS 翻译在 Visualforce 页面内无法正常工作

Question

我需要根据用户偏好将我的 HTML 翻译成不同的语言。为此，我使用 Angular JS 翻译方法。当我在记事本中写入并保存为“.html”时的示例工作正常。但是当我将相同的代码粘贴到我的 Salesforce Visualforce 页面时，它的行为 changes.ie。当我单击按钮 "IT" 将内容翻译成 "Italics" 时，内容正在翻译成斜体，但在几秒钟内内容又回到了他们的首选语言 "EN"。我在下面给出了我的输出截图。

我已经在下面给出了我的代码，谁能告诉我这里面有什么问题。

 <!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>

Answer 1

试试这个

Answer 2

在浏览了开发者论坛中提供的解决方案后，我终于找到了解决问题的方法。实际上，我的内容从 "italics" 回到 "english" 的原因是 "page refreshing"。要阻止页面刷新，我需要将 <button> 类型设置为 "button"。
即<button type="button">

代码更改

<button type="button" ng-click="app.useLang('it')">IT</button> <button type="button" ng-click="app.useLang('en')">EN</button> 我在我的代码中做了更改，它阻止了页面刷新，这反过来又给出了我预期的结果。

Angular JS 翻译在 Visualforce 页面内无法正常工作

Angular JS translate not working properly inside Visualforce page

visualforce

angularjs

angularjs-directive

angular-translate