AngularJS：如何在使用路由时更新变量值答案

【问题标题】：AngularJS: How to update Variable Values while using RoutingAngularJS：如何在使用路由时更新变量值
【发布时间】：2016-08-22 21:17:24
【问题描述】：

我想使用 AngularJS 根据所选语言在页面标题内设置标志图标。该语言是在另一个 .htm 文件中选择的，所有这些都由 AngularJS 路由组合在一起。我的应用程序使用一个名为“appController”的控制器。控制器被插入到“index.html”中的 body-tag 中。在“index.html”中有一个使用角度函数“setPicUrl()”。 “appLang”的值由“language.htm”中的radio-input设置，由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>

【问题讨论】：

如果没有适当的 plunkr，很难知道您的应用程序发生了什么，但据我所知，您只在应用程序初始化时调用 {{setPicUrl()}} 一次，但在 appLang 更改时不会调用。您可以将ng-src="{{setPicUrl()}}" 更改为ng-src="icons/{{appLang}}.png"。这样，您的图像 URL 将更改为存储在 appLang 变量中的内容。您还可以在 HTML 表单中创建一个调用 setPicUrl 函数的按钮，例如<input type="button" ng-click="setPicUrl()" value="Change" />

标签： javascript html angularjs routing

【解决方案1】：

感谢您的帮助！我有一个解决方案：

问题是，控制器在每个视图中都是“appController”的副本，因此变量是具有相同名称的不同变量，并且不同视图无法访问相同的变量。

现在我使用服务与其他控制器共享变量并为每个视图使用自己的控制器。

服务：

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

语言控制器：

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>

【讨论】：

【解决方案2】：

试试这个。你需要执行 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

【讨论】：

【解决方案3】：

变化：

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

收件人：

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

【讨论】：

【解决方案4】：

您可以在引导函数中使用$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。

【讨论】：