CODEWITHSUNDEEP
angularjstranslateangular-translateng-bind
user6747084
user6747084

Reputation:

Angular translate not working.View is not updating when i add html in appendChild

I have attached plunker link for that.

This is my 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"
}

In this New page text (show div function) wont update when i change language. Plunker link https://plnkr.co/edit/1pBWUFZMbHx4zKzNRKzD?p=preview

Upvotes: 1

Views: 1005

Answers (1)

illeb
illeb

Reputation: 2947

Use ng-repeat, do not manipulate DOM inside the controller.

Change your span in something like this:

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

and your showDiv function:

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

Updated plunker here.

You need clearly to think in a more angularjs way. DO NOT pollute your controller with jquery and dom manipulation code. That's not for what angularjs is for.

Read the docs on ng-repeat here.

Upvotes: 1

Related Questions