Как динамически изменить содержимое страницы?

Question

[Максим]

Нужно динамически изменить язык на одной странице, остальные будут подтягиваться через localstorage. Смотрел примеры, более правильные, но в данном случаи нужно сделать именно так.

Шаблон

<div id="canvas" class="canvas">
	<div id="content" class="content">

		<img class="logo" src="images/logo.svg" alt="">
		<p class="header">{{ 'header' | translate }}</p>

		<div class="container460">
			<p class="subHeader">{{ 'description' | translate }}</p>
			<p class="link" ng-click='about()'>{{ 'link' | translate }}</p>
		</div>

		<div class="buttonsPanelColumn">
			<p class="signInButton" ng-click='login()'>{{ 'enterButton' | translate }}</p>
		</div>

		<div class="buttonsPanelRow">
			<p id="ru" class="setLanguageButton" ng-click='switchLanguage("ru")'>Русский</p>
			<p id="en" class="setLanguageButton" ng-click='switchLanguage("en")'>English</p>
			<p id="de" class="setLanguageButton" ng-click='switchLanguage("de")'>Deutsch</p>
			<p id="fi" class="setLanguageButton" ng-click='switchLanguage("fi")'>Suomi</p>
			<p id="ar" class="setLanguageButton" ng-click='switchLanguage("ar")'>العربية</p>
			<p id="tr" class="setLanguageButton" ng-click='switchLanguage("tr")'>Türkçe</p>
			<p id="fr" class="setLanguageButton" ng-click='switchLanguage("fr")'>Français</p>
			<p id="cn" class="setLanguageButton" ng-click='switchLanguage("cn")'>中文</p>
		</div>

	</div>
</div>

Контроллер

// Switch language
		var currentLanguage = localStorage.getItem('NG_TRANSLATE_LANG_KEY');
		var currentLanguageID = document.getElementById(currentLanguage);

		var langButton = angular.element(document.querySelector("#" + currentLanguage));
		langButton.addClass("setLanguageButtonActive")

		$scope.switchLanguage = function(data){
			var selectedLanguage = data;
			var selectedLanguageID = document.getElementById(selectedLanguage);
			if (currentLanguage != data) {
				localStorage.setItem('NG_TRANSLATE_LANG_KEY', data);
				location.reload();
			}
		};

Как можно это реализовать?

Answer 1

[Владимир]

Судя по темплейту это первый ангуляр, есть стандартное решение
https://angular-translate.github.io/

А то что вы назвали контроллером, какая то шляпа, если быть очень вежливым.

var currentLanguageID = document.getElementById(currentLanguage);

    var langButton = angular.element(document.querySelector("#" + currentLanguage));
    langButton.addClass("setLanguageButtonActive")

Что это за говно ?

Для установки активного класса используй https://code.angularjs.org/1.7.0/docs/api/ng/direc...
Для списка языков используй https://code.angularjs.org/1.7.0/docs/api/ng/direc...

Вот это document.querySelector и document.getElementById забудь как страшный сон.