Javascript Angularjs：模型更改后刷新视图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35355318/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs: Refresh view after model changes
提问by John
I'm trying to update the view after adding a new record and updating the model. On the income account details page you can add a new record via a form that pops up in a modal. After submitting the form the modal closes adds the new record to the db and updates the model.
我正在尝试在添加新记录并更新模型后更新视图。在收入帐户详细信息页面上，您可以通过以模态形式弹出的表单添加新记录。提交表单后，模态关闭将新记录添加到数据库并更新模型。
income_account_details.html
income_account_details.html
<ion-view view-title="Account Details: {{incomeAccount.accountName}}">
<ion-nav-buttons side="right">
<button class="button button-icon" ng-click="newIncome()">
<i class="ion-android-add icon"></i>
</button>
</ion-nav-buttons>
<ion-content>
<ion-list>
<div class="list card" ng-repeat="record in incomeAccountRecords">
<div class="item item-divider">
<h2>{{record.date}}</h2>
</div>
<div class="item item-body">
<p>${{record.amount}} note: {{record.note}}</p>
</div>
</div>
</ion-list>
</ion-content>
</ion-view>
controller.js
控制器.js
...
.controller('IncomeAccountsDetailsCtrl', function($scope, $stateParams, dbService, ModalService) {
$scope.incomeAccountRecords = {};
$scope.incomeAccount = {};
$scope.load = function(){
dbService.getRecordsByAccountDb($stateParams.account_id).then(function(incomeAccountRecords){
$scope.incomeAccountRecords = incomeAccountRecords;
});
$scope.incomeAccount = dbService.getIncomeAccountDb($stateParams.account_id);
}
$scope.load();
$scope.newIncome = function(){
ModalService
.init('templates/income.html', $scope)
.then(function(modal){
modal.show();
});
}
$scope.addIncome = function(form){
dbService.addIncomeDb($scope.incomeAccount.id, form.amount.$viewValue, form.date.$viewValue, form.note.$viewValue);
$scope.load();
$scope.closeModal();
}
})
...
The issue that I am running into is after submitting the form the model is getting updated(verified through console.log()) but the view is not. If I refresh the page it shows the correct information.
我遇到的问题是在提交表单后，模型正在更新（通过 console.log() 验证）但视图不是。如果我刷新页面，它会显示正确的信息。
I disabled cache in the state. I have tried adding $scope.$apply in the load() function but that through an error "$digest already in progress"
我在该状态下禁用了缓存。我尝试在 load() 函数中添加 $scope.$apply ，但是通过错误“$digest already in progress”
Is there a way to refresh the view after the model is updated?
有没有办法在模型更新后刷新视图？
Edit:I was able to reload the state by injecting $state into the controller and calling $state.reload() to refresh the page.
编辑：我能够通过将 $state 注入控制器并调用 $state.reload() 来刷新页面来重新加载状态。
.controller('IncomeAccountsDetailsCtrl', function($scope, $stateParams, dbService, ModalService, $state) {
$scope.addIncome = function(form){
dbService.addIncomeDb($scope.incomeAccount.id, form.amount.$viewValue, form.date.$viewValue, form.note.$viewValue);
$scope.load();
$scope.closeModal();
$state.reload();
}
回答by Anil kumar
Please find this answer it may be useful for you
As
After you finished your changes in your modal box
请找到这个答案，它可能对您有用，
因为
在您完成模态框中的更改后
$state.transitionTo("Your current state name", "You can pass any parameters", "Forcefully reloading the view ");
see the below example
1st method
见下面的例子
第一种方法
$state.transitionTo($state.current, {seqId: ''}, { reload: true});
or 2nd method
或第二种方法
$state.reload()
$state.reload()
回答by Hashir Hussain
Push newly added record to $scope.incomeAccountRecords.
将新添加的记录推送到$scope.incomeAccountRecords.
回答by Phoenix
The "load" function is getting called within "addIncome" which is updating the "$scope.incomeAccountRecords". This should automatically update the view. You should check what the "$scope.closeModal()" call is doing. Probably that is causing an issue.
在更新“$scope.incomeAccountRecords”的“addIncome”中调用“load”函数。这应该会自动更新视图。您应该检查“$scope.closeModal()”调用在做什么。可能这导致了问题。
回答by EduLopez
You can use $state.transitionTo or $state.go('', {reload: true}) and $state.reload.
您可以使用 $state.transitionTo 或 $state.go('', {reload: true}) 和 $state.reload。
but if you want to make each controller reload after view change
但是如果你想让每个控制器在视图更改后重新加载
myApp.config(function($ionicConfigProvider) {$ionicConfigProvider.views.maxCache(0);}
回答by Suresh B
try this
尝试这个
router.setUpRoutes();
