Вопрос:

AngularJS: Как обновить значения переменных при использовании маршрутизации

javascript html angularjs routing

573 просмотра

4 ответа

11 Репутация автора

Я хочу установить значок флага внутри заголовка моей страницы в зависимости от выбранного языка, используя AngularJS. Язык выбирается в другом .htm-файле, и все это объединено AngularJS-маршрутизацией. Мое приложение использует один контроллер с именем "appController". Контроллер вставляется в тег body в «index.html». Внутри index.html есть функция, которая использует угловую функцию setPicUrl (). Значение "appLang" устанавливается радиовходом в "language.htm", который вставляется в маршрутизацию AngularJS.

Проблема в том, что путь к значку флага не меняется, когда я выбираю другой язык (переменная "appLang" делает). Значок загружается правильно, когда я запускаю приложение.

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>
Автор: keschny Источник Размещён: 22.08.2016 09:17

Ответы (4)


0 плюса

4163 Репутация автора

Попробуй это. Вам нужно выполнить 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
Автор: el3ien Размещён: 22.08.2016 09:51

0 плюса

152 Репутация автора

Вы можете использовать $routeChangeStartили $routeChangeSuccessкоторые являются встроенными функциями AngularJS в функции начальной загрузки. Например, когда маршрут был изменен, $routeChangeSuccessбудет вызван автоматически, и вы можете изменить ваши $ rootScope, $ localStorage и любые другие переменные директивы, Попробуйте, как этот код:

//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
          }
    });
}

Теперь вы можете привязать $ rootScope.iconLang к тегу изображения, который вам нужен, например, $ scope.iconLang. Надеюсь, что это может помочь U Bro

Автор: Ramin Esfahani Размещён: 22.08.2016 09:55

0 плюса

159 Репутация автора

Изменить:

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

Для того, чтобы:

<img id="langpic" ng-src="icons/{{appLang}}.png" class="img-responsive">
Автор: Kamran Khan Размещён: 22.08.2016 09:57

1 плюс

11 Репутация автора

Спасибо за вашу помощь! Я получил решение:

Проблема заключалась в том, что контроллер был копией «appController» в каждом представлении, и поэтому переменные были разными с одним и тем же именем, и разные представления не имели доступа к одной и той же переменной.

Теперь я использую сервис для обмена переменными с другими контроллерами и использую собственный контроллер для каждого представления.

оказание услуг:

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 для смены языка (используя 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 для отображения значка флага в заголовке (используя headerController):

<li><img id="langpic" ng-src="{{setPicUrl()}}" class="img-responsive"></li>
Автор: keschny Размещён: 23.08.2016 11:41
Вопросы из категории :
32x32