Sherokan Sherokan - 1 year ago 62
Javascript Question

AngularJS - variables not updating in view (not using scope)

I've got a problem with angular,
A portion of my variable are not updating after changing their values.
My header updates just fine my footer only stays with their initial values.

Here are some code :

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container" ng-controller="LanguageController as language">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#"> {{ language.lblAppName }}</a>
<div class="vertical-center" id="language">
<label> {{ language.lblSelectLanguage }} </label>
<select ng-options="item for item in language.languages" ng-model="language.selectedLanguage" ng-change="language.changeLanguage()"></select>
<button ng-click="language.editLanguage()">{{ language.lblEditLanguage }}</button>

<!-- there will be an ng-route directive here later on -->
<nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="container-fluid" ng-controller="LanguageController as language">
<div class="navbar-header">
<div class="navbar-brand"> {{ language.lblFooter }} </div>
<ul class="nav navbar-nav">
<li class="active"><a href="#"> {{ language.lblMainPage }} </a></li>
<li><a href="#">placeholder</a></li>
<li><a href="#">placeholder</a></li>
<li><a href="#">placeholder</a></li>

All my variables are updating fine here except for "language.lblFooter " and "language.lblFooter".

here is the declaration of my module


// note: when calling angular.module("moduleName,["dependancies"]) a new module is created.
// when callung angular.module("moduleName") the module "modulename" is called.
/** @module
* Creation of the application module: CarViewer */

angular.module("carViewer", []);

And here are extracts from the code that updates the variables :

var vm = this;
* Initialise the retrieve sequence.
* @function
* @private
function activate() {
// work fine the strings are returned from the backend correctly
return languageService.getLanguages()
.then(onLanguagesComplete, OnError);

* Is called when the language retrieve is completed
* assign the different variables
* @function
* @private
* @param {string[]} data - The data returned by the getLanguages() function
function onLanguagesComplete(data) {

vm.languages = data.languages; // list of all available languages
vm.strings = data.strings; // Two dimentional array containing the strings in every language

vm.selectedLanguage = vm.languages[DEFAULT_LANGUAGE];


* Assign the new strings into the different variables
* @function
* @private
function assignStrings(language) {

// Different labels
vm.lblSelectLanguage = vm.strings[language].lblSelectLanguage;
vm.lblEditLanguage = vm.strings[language].lblEditLanguage;
vm.lblAppName = vm.strings[language].lblAppName;
vm.lblMainPage = vm.strings[language].lblMainPage;
vm.lblFooter = vm.strings[language].lblFooter;

// and the changeLanguage that is called by the view
* Allow the DOM to changes the language displayed,
* @function
* @public
function changeLanguage(){

So every variables are correctly updated except for the on in the footer.
Do you guys have any idea why ?

I have seen that this problem could be resolved by using $scope.apply() but i'm not using $scope ?
I tried this.$digest and this.$apply but neither works.

EDIT: I tried ingecting $scope just for the $scope.$apply(); purpose but it's not working either. I want to precise that I use $http to retrieve the .json file.

Thanks a lot.

Answer Source

You have 2 instances of the controller. When you do ng-change="language.changeLanguage() it only updates that controller.

So in the footer there's never called the changeLanguage()

Consider refactoring and using a service or factory for that language change

You could also do
<body ng-controller="LanguageController as language">
since you have the controller as it won't affect anything it shouldn't