AngularJS：如何在使用路由時更新變量值

我想使用AngularJS根據所選語言在頁面頭部設置標誌圖標。該語言是在另一個.htm文件中選擇的，它的全部由AngularJS路由集合在一起。我的應用程序使用一個名爲「appController」的控制器。控制器被插入到「index.html」中的主體標籤中。在「index.html」裏面有一個使用角度函數「setPicUrl（）」的函數。「appLang」的值由「language.htm」中的無線電輸入設置，該語言通過AngularJS使用路由插入。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>

來源

2016-08-22 keschny

很難知道發生了什麼事情與你的應用，而無需一個合適的plunkr，但是從我收集的內容來看，只有在應用程序初始化時調用'{{setPicUrl（）}}'，而不是在appLang更改時調用。你可以把'ng-src =「{{setPicUrl（）}}''改成'ng-src =」圖標/ {{appLang}}。這樣，您的圖片網址將更改爲存儲在「appLang」變量中的內容。您也可以在HTML表單中創建一個調用'setPicUrl'函數的按鈕，例如'' –

試試這個。您需要執行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

來源

2016-08-22 21:51:12 EL3PHANTEN

您可以使用$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。希望這可以幫助ü兄弟

來源

2016-08-22 21:55:48

變化：

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

要：

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

來源

2016-08-22 21:57:34

感謝您的幫助！我得到了一個解決方案：

問題是，控制器在每個視圖中都是「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>

來源

2016-08-23 11:41:14 keschny

AngularJS：如何在使用路由時更新變量值

回答

相關問題