角度翻译不起作用。当我在 appendChild 中添加 html 时，视图没有更新答案

【问题标题】：Angular translate not working.View is not updating when i add html in appendChild角度翻译不起作用。当我在 appendChild 中添加 html 时，视图没有更新
【发布时间】：2017-01-01 11:49:40
【问题描述】：

我已经附加了 plunker 链接。

这是我的html

<!doctype html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-cookies.js"></script>
  <script src="https://rawgithub.com/angular-translate/bower-angular-translate/master/angular-translate.min.js"></script>
  <script src="https://rawgithub.com/angular-translate/bower-angular-translate-storage-cookie/master/angular-translate-storage-cookie.js"></script>
  <script src="https://rawgithub.com/angular-translate/bower-angular-translate-loader-static-files/master/angular-translate-loader-static-files.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="someController">
  <div id="parent">
  <h1>{{'HEADLINE' | translate }}</h1>
  <button ng-click="switchLanguage('de_DE')" translate="LANG_DE_DE"></button>
  <button ng-click="switchLanguage('en_US')" translate="LANG_EN_US"></button>
  <button id="myButton" class="float-right submit-button" ng-click="showDiv()" >Click here</button>
  </div>

<script type="text/javascript">

</script>
<div id="hello">

<span name="new" id="newpage"  style="display: none;">
  <h1 class="xx">{{'HELLO'| translate }}</h1>
  </span>
  </div>
</body>

</html>

app.js

angular.module('myApp', ['pascalprecht.translate', 'ngCookies']);

angular.module('myApp').config(['$translateProvider',
  function($translateProvider) {
    var language = (window.navigator.userLanguage || window.navigator.language).toLowerCase();
    console.log(language);
    $translateProvider.registerAvailableLanguageKeys(['de_DE', 'en_US'], {
    'en_US': 'en_US',
    'en_UK': 'en_US',
    'en': 'en_US',
    'de': 'de_DE'
    });

    $translateProvider.useStaticFilesLoader({
      prefix: 'lang_',
      suffix: '.json'
    });


    $translateProvider.preferredLanguage('en_US');
    // $translateProvider.use('de');
    $translateProvider.useCookieStorage();
    $translateProvider.fallbackLanguage("de_DE");
  }
]);

angular.module('myApp').controller('someController', ['$scope', '$translate',
  function($scope, $translate) {

    $scope.switchLanguage = function(key) {
      $translate.use(key);
    };
     $scope.showDiv = function() 
    {
      var html = document.getElementById("newpage").innerHTML;
      var container = document.createElement("span");
        container.innerHTML = html;
        document.getElementById("parent").appendChild(container);

    }
  }

]);

lang_de_DE.json

{
 "HEADLINE": "Überschrift",
 "LANG_DE_DE": "Sprache: Deutsch",
 "LANG_EN_US": "Sprache: Englisch",
 "HELLO"      :"Neue Seite"
}

lang_en_US.json

{
 "HEADLINE": "Headline!",
 "LANG_DE_DE": "Lang: German",
 "LANG_EN_US": "Lang: English",
 "HELLO"      :"New page"
}

当我更改语言时，在这个新页面中的文本（显示 div 功能）不会更新。插件链接https://plnkr.co/edit/1pBWUFZMbHx4zKzNRKzD?p=preview

【问题讨论】：

标签： angularjs translate angular-translate ng-bind

【解决方案1】：

使用 ng-repeat，不要在控制器内部操作 DOM。

像这样改变你的跨度：

<span ng-repeat="div in divs">
   <h1 class="xx">{{'NEWPAGE'| translate }}</h1>
</span>

还有你的 showDiv 函数：

scope.divs = [];
$scope.showDiv = function() 
{
   $scope.divs.push({});
}

更新了 plunker here.

你需要清楚地以更 angularjs 的方式思考。不要用 jquery 和 dom 操作代码污染你的控制器。那不是 angularjs 的用途。

阅读 ng-repeat here 上的文档。

【讨论】：