HELP!: Scope+Route - Dynamical Content+Variables
 

Ситуация: Здравствуйте, делаю веб-приложение где используеться несколько языков, а также "Роутер". Роутер и мулти-язычность реализованы с помощью AngularJS. НО! есть 1 проблема, только вот начал изучать Англярку, и еще плохо разбираюсь в ее логике.
Нужно: чтобы приложение работало с роутером (подгружало динамически контент - удобно быстро и "дешевле"), а также когда я меняю язык (подгружается языковый файл .json, и сохраняеться в storage), чтобы переводило текст интерфейса. Все это реализовано, НО -
Проблема:
1) когда загружеться страница с роутера, то надо отдельно вызывать "перевод" scope, точнее инициалзация (расчеты и прорисовка) контента:

$scope.$on('$viewContentLoaded', function($routeParams) {
	paint();
});

= хотелось бы чтобы переводило автоматом (вставляло значение переменных)
2) и САМОЕ ВАЖНОЕ - когда меняю язык, подгружаеться файл языка, сохраняется в storage (или indexedBD), изменяеться переменная, и... переводит ТОЛЬКО стационарный контент! Динамическую часть (ng-view) не переводит!!! Не знаю как заставить ее переводить.

function translate(){
	console.log("translate");
	var appElement = document.querySelector('[ng-controller="TranslateController"]'),
			$scope = angular.element(appElement).scope();
		$scope.$apply(function() {
			$scope.ml = Lang.text;
			$scope.ml.code = Lang.code;
			$scope.ml.name = Lang.name;
			$scope.ml.version = Lang.version;
			$scope.ml.langs = [];
			for(var lang in version.Lang){
				if(lang != $scope.ml.code){
					version.Lang[lang].code = lang;
					$scope.ml.langs.push(version.Lang[lang]);
				};
			};
		});
	return true;
};

Просьба: Помогите пожалуйста разобраться!

З.Ы. Инициализация "Роутера":

function APP_INIT(){
	console.log("\n| APP_INIT");
	//Router
	var app = angular.module('multiLang', ['ngRoute']);
	app.config( function ($routeProvider) {
		$routeProvider
			.when("/",{
					controller : "TranslateController",
					templateUrl : "views/index.html"
			})
			.when("/about",{
					controller : "TranslateController",
					templateUrl : "views/about.html"
			})
			.when("/donate",{
					controller : "TranslateController",
					templateUrl : "views/donate.html"
			})
			.when("/feedback",{
					//controller : "TranslateController",
					templateUrl : "views/feedback.html"
			})
			.otherwise({redirectTo : "/"});
	});
	app.controller('TranslateController', function ml($scope, $routeParams){
		$scope.ml = Lang.text;
		$scope.$on('$viewContentLoaded', function($routeParams) {
			paint();
			//$route.reload();
			//translate();
		});
	});

	console.log("online^: ", online())
	online() 
		? ONLINE_MODE() 
		: OFFLINE_MODE()
};

Чтобы Ангулар тебе помогал - нужно все делать через него.

Грузи всю модель в нужном тебе языке - Ангулар все заменит.

Первое понял а Второе нет:
есть переменная Lang, есть app 'multiLang', есть app.controller 'TranslateController' = "ml" (для просто вводе переменных)
язык после загрузки и сбережения присваивается переменной Lang и $scope.ml = Lang.text;
Перевод после загрузки

$scope.$apply(function() {
			$scope.ml = Lang.text;
			$scope.ml.code = Lang.code;
			$scope.ml.name = Lang.name;
			$scope.ml.version = Lang.version;
			$scope.ml.langs = [];
			for(var lang in version.Lang){
				if(lang != $scope.ml.code){
					version.Lang[lang].code = lang;
					$scope.ml.langs.push(version.Lang[lang]);
				};
			};
		});

Если просто гружу страницу через "Роутер" - все ок, переводит, если перевожу через $apply - только стационар без ng-view, может передать как-то scope для $apply? я не силен в этом
Еще раз: когда изменился язык, но в "ng-view" он измениться толкьо если перегружу страницу или зайду на другу и вернусь - я так понимаю суть в этом var app = angular.module('multiLang', ['ngRoute']);
Но вот заставить вручну измениться после изминение переменной получаеться только для стационарки

Если я правильно понял, то сделал вот это:

var appElement = document.querySelector('[ng-app="multiLang"]'),
...
$scope.$apply(function()...

Но теперь вообще не переводит :blink:

Суть второго.
Ангулар "видит" свою модель и если твои изменения ему известны - он перерисует страницу согласно данным модели.

Если перерисовки нет:
- либо ты не поменял модель
- либо Ангулар про это не знает

Советовать что-то конкретное можно только на работающем тестовом примере (я их тут наделал кучу). Т.ч. начинай его мастырить.

Нашел ошибку: область видимости устанавливается по Контроллеру app.controller('TranslateController'...) (<body ng-controller="TranslateController" >) на момент объявления и до загрузки "Роутером" контента, в итоге это только навигация, а надо чтобы оно постоянно знало весь контент что динамически изменяеться - в jQuery намного с этим проще

исправил костылем:

app.controller('TranslateController', function ml(){
		var appElement = document.querySelector('[ng-controller="TranslateController"]'),
			$scope = angular.element(appElement).scope();
			console.log(appElement);
		
		$scope.ml = Lang.text;
		$scope.$on('$viewContentLoaded', function($scope, $routeParams) {
			paint();
			//$route.reload();
			//translate();
		});
	});

Вместо

app.controller('TranslateController', function ml($scope, $routeParams){
		$scope.ml = Lang.text;
		$scope.$on('$viewContentLoaded', function() {
			paint();
			//$route.reload();
			//translate();
		});
	});

Используй https://github.com/angular-translate/angular-translate, там решены детские проблемы. А потом и вовсе избавься от динамической смены языка. Это такая редкая ситуация, что усложнять из-за этого код, и вешать вотчи на каждую фразу слишком расточительно. Сборщик должен вставлять в шаблоны фразы на разных языках и группировать их по папочкам, а при смене языка просто тянешь сайт из другой папки. (к angular-translate был плагин, сканирующий код и заменяющий фразы по ключу)