1. ホーム
  2. 質問と答え
  3. AngularJS：ルーティングの使用中に変数値を更新する方法

AngularJS：ルーティングの使用中に変数値を更新する方法

2016-08-22 6 views
0

AngularJSを使用して、選択した言語に応じて、ページのヘッダーの内側にフラグアイコンを設定します。言語は別の.htmファイルで選択され、そのすべてがAngularJSルーティングによってまとめられています。 私のアプリケーションでは、「appController」という名前のコントローラが1つ使用されています。コントローラーは "index.html"のbody-tagに挿入されます。 "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

+0

それがなくてもアプリで何が起こっているのかを知るのは難しい：（headerController使用して）ヘッダ内のフラグアイコンを表示するための

<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：言語（langControllerを使用）を変更するためのHTML私が集めるものからは、アプリケーションが初期化されるときに '{{setPicUrl（）}} 'を一度呼び出すだけですが、appLangが変更されるときは呼び出されません。 'ng-src =" {{setPicUrl（）}} "'を 'ng-src =" icons/{{appLang}} .png "'に変更することができます。このようにして、画像URLは 'appLang'変数に格納されているものに変更されます。例えば ​​'setPicUrl'関数を呼び出すHTMLフォームでボタンを作成することもできます。 '' –

答えて

0

はこれを試してみてください。あなたは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

0

あなたは組み込み関数ブートストラップ機能にAngularJSある$routeChangeStartまたは$routeChangeSuccessを使用することができます。ルートは$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ブロを助けることができる

出典

2016-08-22 21:55:48

0

変更：

<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

1

ありがとう！私は解決策を得ました：

問題は、コントローラがそれぞれのビューで "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; 
     } 
    }; 
}); 


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

出典

2016-08-23 11:41:14 keschny

関連する問題

 関連する問題