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

Question

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 :

<body>
  <!-- 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>
          <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>
          </div>
      </div>
    </nav>

   <!-- 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>
      </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> 
      </ul>
    </div>
  </nav>
</body>

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

here is the declaration of my module

(function(){

// 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];

        assignStrings(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(){
        assignStrings(vm.languages.indexOf(vm.selectedLanguage));
    }

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.

@MikeTung, His code seems to be adhering to the Angular Style Guide by John Papa. — David R
– David R, Commented Sep 16, 2016 at 14:11

taguenizy · Accepted Answer · 2016-09-16 14:32:21Z

1

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

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

edited Sep 16, 2016 at 14:32

answered Sep 16, 2016 at 14:19

taguenizy

2,2851 gold badge12 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Cassifiore Over a year ago

Oh, I thought everything was singleton in Angular. That would explain it. Is there a possibility to use the same instance as before ? Creating a service would mess with my architecture (I'm developing a framework that is supposed to be very modular and each module is supposed to be independent).

Joao Polo Over a year ago

define the controller at the <body> tag and you will be only one instance

taguenizy Over a year ago

@Sherokan you could use Joaozito Polo suggestion, put it in the body since you have the controller as it won't affect anything it shouldn't

Cassifiore Over a year ago

Yeah but I will have an ng-view directive between the header and footer with it's own controller. won't it interfere ?

taguenizy Over a year ago

@Sherokan unless there's another controller as language there shouldn't be any issue

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related