AngularJS: How to update Variable Values while using Routing

Question

i want to set the flag icon inside the header of my page depending on the selected language, using AngularJS. The language is selected in another .htm-file and its all brought together by AngularJS-routing. My application uses one controller named "appController". The controller is inserted into the body-tag in "index.html". Inside "index.html" there is a that uses the angular function "setPicUrl()". The value of "appLang" is set by the radio-input in "language.htm", which is inserted into using routing by AngularJS.

The problem is, that the path for the flag icon does not change when i select another language (the variable "appLang" does). The icon is loaded correctly when i start the application.

routing.js

var app = angular.module("angApp", ["ngRoute"]);
app.config(function ($routeProvider) {
    $routeProvider
        .when("/visualization", {
            templateUrl: "htm/visualization.htm",
            controller: "appController"
        })
        .when("/data", {
            templateUrl: "htm/data.htm",
            controller: "appController"
        })
        .when("/social", {
            templateUrl: "htm/social.htm",
            controller: "appController"
        })
        .when("/about", {
            templateUrl: "htm/about.htm",
            controller: "appController"
        })
        .when("/language", {
            templateUrl: "htm/language.htm",
            controller: "appController"
        });
});

controller.js

app.controller("appController", function ($scope, $http, $location) {
$scope.appLang = "english";
$scope.setPicUrl = function () {
        if ($scope.appLang === "german") {
            return "icons/german.png";
        } else if ($scope.appLang === "english") {
            return "icons/english.png";
        } else {
            //TODO Error handling
            return;
        }
    };

index.html

<body ng-app="angApp" ng-controller="appController">
...
<li ng-class="{ active: headerIsActive('/language')}"><a href="#language"><img id="langpic"
                                                                                               ng-src="{{setPicUrl()}}"
                                                                                               class="img-responsive"></a>
...
<div ng-view></div>
</body>

language.htm

<div class="panel panel-default">
        <div class="panel-heading">Spracheinstellungen</div>
        <div class="panel-body">

            <form>
                Wählen Sie ihre Sprache aus:
                <br/>
                <input type="radio" ng-model="appLang" value="german">Deutsch
                <br/>
                <input type="radio" ng-model="appLang" value="english">Englisch
            </form>
        </div>
    </div>

It's hard to know what's going on with your app without a proper plunkr but from what I gather, you're only calling {{setPicUrl()}} once when the application initializes, but not when appLang changes. You can change ng-src="{{setPicUrl()}}" to ng-src="icons/{{appLang}}.png". This way, your image URL will change to what is stored in the appLang variable. You can also create a button in your HTML form that calls the setPicUrl function e.g. <input type="button" ng-click="setPicUrl()" value="Change" /> — Kamran Khan
– Kamran Khan, Commented Aug 22, 2016 at 21:53

keschny · Accepted Answer · 2016-08-23 11:41:14Z

Thanks for your help! I got a solution:

The problem was, that the controller has been a copy of "appController" in each view and therefore the variables were different ones with the same name and the different views had no access to the same variable.

Now i use a service to share variables with other controllers and use an own controller for each view.

service:

app.factory("sharedProperties", function () {
    return {
        appLanguage: ""
    };
});

langController:

app.controller("langController", function ($scope, sharedProperties) {
    $scope.updateSharedProperties = function (){
        sharedProperties.appLanguage = $scope.language;
        console.log("--> updateSharedProperties(): " + $scope.language);
    };
});

headerController:

app.controller("headerController", function ($scope, $http, $location, sharedProperties) {
    $scope.setPicUrl = function () {
        if (sharedProperties.appLanguage === "german") {
            return "icons/german.png";
        } else if (sharedProperties.appLanguage === "english") {
            return "icons/english.png";
        } else {
            //TODO Error handling
            return;
        }
    };
});

HTML for changing language (using langController):

<form>
                Wählen Sie ihre Sprache aus:
                <br/>
                <input type="radio" ng-model="language" value="german" ng-click="updateSharedProperties()">Deutsch
                <br/>
                <input type="radio" ng-model="language" value="english" ng-click="updateSharedProperties()">Englisch
            </form>

HTML for displaying flag-icon in header (using headerController):

<li><img id="langpic" ng-src="{{setPicUrl()}}" class="img-responsive"></li>

el3ien · Accepted Answer · 2016-08-22 21:51:12Z

0

Try this. You need to execute the setPicUrl:

<input type="radio" ng-click="setPicUrl()" ng-model="appLang" value="german">Deutsch
<br/>
<input type="radio" ng-click="setPicUrl()" ng-model="appLang" value="english">Englisch

answered Aug 22, 2016 at 21:51

el3ien

5,4151 gold badge19 silver badges34 bronze badges

Comments

Kamran Khan · Accepted Answer · 2016-08-22 21:57:34Z

0

Change:

<img id="langpic" ng-src="{{setPicUrl()}}" class="img-responsive">

To:

<img id="langpic" ng-src="icons/{{appLang}}.png" class="img-responsive">

answered Aug 22, 2016 at 21:57

Kamran Khan

4531 gold badge6 silver badges19 bronze badges

Comments

halfer · Accepted Answer · 2020-12-17 00:24:38Z

You can use $routeChangeStart or $routeChangeSuccess which are AngularJS built-in functions in bootstrapping function. For example when the route has been changed $routeChangeSuccess will be called automatically and you can change your $rootScope, $localStorage and any other directive's variables.

Try like this code:

//Bootstrapping Func
app.run(function ($window, $rootScope, $location, $route, $localStorage)
{
    $rootScope.appLang = "english";
    $rootScope.iconLang = "icons/english.png";

    // On Route Change End Event
    //---------------------------------------------
    $rootScope.$on('$routeChangeSuccess', function ()
    {
          if ($rootScope.appLang === "german") {
             $rootScope.iconLang = "icons/german.png";
          } else if ($rootScope.appLang === "english") {
             $rootScope.iconLang = "icons/english.png";
          } else {
             //TODO Error handling
          }
    });
}

Now you can bind the $rootScope.iconLang to the image tag you want like $scope.iconLang.

Collectives™ on Stack Overflow

AngularJS: How to update Variable Values while using Routing

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related