2016-09-16 11 views
0

私は私の変数の 部分はそれらの値を変更した後に更新されていない、角度の問題を持っています。 ヘッダーが更新されても、フッターの初期値は残っています。AngularJS - 変数ビューで更新されない(スコープを使用していない)

<body> 
    <!-- Navigation --> 
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
     <div class="container" ng-controller="LanguageController as language"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="#"> {{ language.lblAppName }}</a> 
      </div> 
      <div class="vertical-center" id="language"> 
       <label> {{ language.lblSelectLanguage }} </label> 
       <select ng-options="item for item in language.languages" ng-model="language.selectedLanguage" ng-change="language.changeLanguage()"></select> 
       <button ng-click="language.editLanguage()">{{ language.lblEditLanguage }}</button> 
      </div> 
     </div> 
    </nav> 

    <!-- there will be an ng-route directive here later on --> 
    <nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation"> 
    <div class="container-fluid" ng-controller="LanguageController as language"> 
     <div class="navbar-header"> 
     <div class="navbar-brand"> {{ language.lblFooter }} </div> 
     </div> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#"> {{ language.lblMainPage }} </a></li> 
     <li><a href="#">placeholder</a></li> 
     <li><a href="#">placeholder</a></li> 
     <li><a href="#">placeholder</a></li> 
     </ul> 
    </div> 
    </nav> 
</body> 

すべての私の変数は "language.lblFooter" と "language.lblFooter" を除いて、ここで罰金更新しています:

はここにいくつかのコードです。だから、すべての変数が正しくフッターに上を除き、更新され

var vm = this; 
/** 
    * Initialise the retrieve sequence. 
    * @function 
    * @private 
    */ 
    function activate() { 
     // work fine the strings are returned from the backend correctly 
     return languageService.getLanguages() 
       .then(onLanguagesComplete, OnError); 
    } 

/** 
    * Is called when the language retrieve is completed 
    * assign the different variables 
    * @function 
    * @private 
    * @param {string[]} data - The data returned by the getLanguages() function 
    */ 
    function onLanguagesComplete(data) { 

     vm.languages = data.languages; // list of all available languages 
     vm.strings = data.strings; // Two dimentional array containing the strings in every language 

     vm.selectedLanguage = vm.languages[DEFAULT_LANGUAGE]; 

     assignStrings(DEFAULT_LANGUAGE); 
    }; 

/** 
    * Assign the new strings into the different variables 
    * @function 
    * @private 
    */ 
    function assignStrings(language) { 

     // Different labels 
     vm.lblSelectLanguage = vm.strings[language].lblSelectLanguage; 
     vm.lblEditLanguage = vm.strings[language].lblEditLanguage; 
     vm.lblAppName = vm.strings[language].lblAppName; 
     vm.lblMainPage = vm.strings[language].lblMainPage; 
     vm.lblFooter = vm.strings[language].lblFooter; 
    } 

// and the changeLanguage that is called by the view 
/** 
    * Allow the DOM to changes the language displayed, 
    * @function 
    * @public 
    */ 
    function changeLanguage(){ 
     assignStrings(vm.languages.indexOf(vm.selectedLanguage)); 
    } 

:ここ

は、変数を更新するコードからの抽出物は、私のモジュールの宣言

(function(){ 

// note: when calling angular.module("moduleName,["dependancies"]) a new module is created. 
//  when callung angular.module("moduleName") the module "modulename" is called. 
/** @module 
* Creation of the application module: CarViewer */ 

angular.module("carViewer", []); 
}()); 

そして、ここにあるさ。 あなたはどんな考えがありますか?

私はこの問題は$ scope.applyを(使用して解決することができることを見てきました)しかし、私は$スコープを使用していませんよ? 私はこれを試しました。$ digestとthis。$は適用されますがどちらも動作しません。

EDIT:私はちょうど$スコープの$スコープをingecting試してみました$(適用されます)。どちらも機能していません。 .jsonファイルを取得するために$ httpを使用していることを正確に説明したいと思います。

ありがとうございます。

+0

なぜ$ scopeを使用しないのですか? –

+1

@MikeTung、彼のコードはJohn Papaの「Angular Style Guide」を遵守しているようです。 –

+1

@DavidR正確に! :) – Sherokan

答えて

1

コントローラのインスタンスが2つあります。 ng-change="language.changeLanguage()を実行すると、コントローラのみが更新されます。

だからフッターにchangeLanguage()

はあなたが持っているので、あなたはまた、
<body ng-controller="LanguageController as language">
を行うことができリファクタリングとその言語の変更のためのサービスや工場を使用して

EDIT
を考えるが呼び出されることはありませんですコントローラーは何も影響しません。

+0

ああ、私はすべてが角度でシングルトンだと思った。それはそれを説明するでしょう。以前と同じインスタンスを使用する可能性はありますか?サービスを作成することは私のアーキテクチャを混乱させるでしょう(私は非常にモジュラーであると思われるフレームワークを開発しており、各モジュールは独立していると考えられています)。 – Sherokan

+1

はタグでコントローラを定義し、Joaozitoポロの提案を使用することができ@Sherokanあなただけの1インスタンス –

+1

になり、あなたはそれはそれはすべきではない – taguenizy

関連する問題