2016-09-16 122 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」。

這裏是我的模塊

(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", []); 
}()); 

這裏是從代碼中提取的聲明更新變量:

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

所以每次變量正確更新除了在頁腳。 你們有什麼想法,爲什麼?

我看到這個問題可以通過使用$ scope.apply()來解決,但我沒有使用$ scope? 我試過這個。$ digest和這個。$ apply但是都不行。

編輯:我試圖只爲$範圍ingecting $範圍。目的,但它也不起作用。我想確切地說我使用$ http來檢索.json文件。

非常感謝。

+0

爲什麼不使用$範圍? –

+1

@MikeTung,他的代碼似乎遵守約翰帕帕的「Angular Style Guide」。 –

+1

@DavidR正好! :) – Sherokan

回答

1

您有2個控制器實例。當你做ng-change="language.changeLanguage()它只更新該控制器。

所以在頁腳還有從未叫changeLanguage()

考慮重構,並使用該語言變化的服務或工廠

編輯
你也可以做
<body ng-controller="LanguageController as language">
既然你有控制器,因爲它不會影響任何它不應該

+0

哦,我以爲Angular的所有東西都是單身。這將解釋它。是否有可能像以前一樣使用相同的實例?創建一個服務會混淆我的架構(我正在開發一個應該是非常模塊化的框架,並且每個模塊應該是獨立的)。 – Sherokan

+1

在標籤處定義了控制器,你將只有一個實例 –

+1

@Sherokan你可以使用Joaozito Polo的建議,把它放在主體中,因爲你有'控制器',它不會影響任何它不應該的東西 – taguenizy