CODEWITHSUNDEEP
javascripthtmlangularjsroutes
keschny
keschny

Reputation: 11

AngularJS: How to update Variable Values while using Routing

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>

Upvotes: 0

Views: 1271

Answers (4)

Ramin Esfahani
Ramin Esfahani

Reputation: 220

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.

Upvotes: 0

keschny
keschny

Reputation: 11

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>

Upvotes: 1

Kamran Khan
Kamran Khan

Reputation: 453

Change:

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

To:

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

Upvotes: 0

el3ien
el3ien

Reputation: 5405

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

Upvotes: 0

Related Questions