Angularjs:模型更改后刷新视图

Joh*_*ohn 4 javascript angularjs ionic-framework

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

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>
Run Code Online (Sandbox Code Playgroud)

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();
    }
})
...
Run Code Online (Sandbox Code Playgroud)

我遇到的问题是在提交模型后,模型正在更新(通过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();
}
Run Code Online (Sandbox Code Playgroud)

Ani*_*mar 6

请找出这个答案可能对您有用
正如
当您在您的模式对话框完成的更改

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

请参阅下面的示例
第一种方法

$state.transitionTo($state.current, {seqId: ''}, { reload: true});
Run Code Online (Sandbox Code Playgroud)

或第二种方法

$state.reload()