Question

我在添加新记录并更新模型后尝试更新视图。在收入帐户详细信息页面上，您可以通过弹出模式的表单添加新记录。提交表单后，模态关闭会将新记录添加到数据库并更新模型。

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

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

我遇到的问题是在提交表单后模型正在更新（通过console.log（）验证），但视图不是。如果我刷新页面，它会显示正确的信息。

我在状态中禁用了缓存。我已经尝试在load（）函数中添加$ scope。$ apply但是通过错误“$ digest has progress”

更新模型后有没有办法刷新视图？

编辑：我能够通过将$ 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();
}

Answer 1

请找到这个答案，它可能对你有用作为
完成模态框中的更改后

$state.transitionTo("Your current state name", "You can pass any parameters", "Forcefully reloading the view ");

见下面的例子
第一种方法

$state.transitionTo($state.current, {seqId: ''}, { reload: true});

或第二种方法

$state.reload()

Answer 2

将新添加的记录推送到$scope.incomeAccountRecords。

Answer 3

在“addIncome”中调用“load”函数，该函数正在更新“$ scope.incomeAccountRecords”。这应该会自动更新视图。您应该检查“$ scope.closeModal（）”调用正在执行的操作。可能是造成问题。

Answer 4

您可以使用$ state.transitionTo或$ state.go（＆＃39;＆＃39;，{reload：true}）和$ state.reload。

但如果您想在视图更改后重新加载每个控制器

myApp.config(function($ionicConfigProvider) {$ionicConfigProvider.views.maxCache(0);}

Answer 5

试试这个

  router.setUpRoutes();

Angularjs：模型更改后刷新视图

5 个答案: