我遇到了 Angular 问题， 我的变量的一部分在更改其值后没有更新。 我的页眉更新得很好，我的页脚仅保留其初始值。
这里有一些代码:
<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 ？ 我尝试了 this.$digest 和 this.$apply 但都不起作用。
编辑:我尝试只是为了 $scope.$apply(); 感染 $scope目的，但它也不起作用。我想准确地说，我使用 $http 来检索 .json 文件。
非常感谢。
最佳答案
您有 2 个 Controller 实例。当你这样做时ng-change="language.changeLanguage()它只更新该 Controller 。
因此在页脚中从未调用过 changeLanguage()
考虑重构并使用服务或工厂来进行语言更改
编辑
你也可以这样做
<body ng-controller="LanguageController as language">
因为你有 Controller ，因为它不会影响任何它不应该影响的东西
关于javascript - AngularJS - 变量未在 View 中更新(不使用范围)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39533562/