Angularjs：模型更改后刷新视图答案

【问题标题】：Angularjs: Refresh view after model changesAngularjs：模型更改后刷新视图
【发布时间】：2016-02-12 05:18:48
【问题描述】：

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

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

【问题讨论】：

更新数据后...尝试重新加载state
如何从控制器中重新加载状态？
@Anilkumar 这行得通。我在控制器中添加了 $state 作为依赖项，然后在 addIncome 函数的末尾调用了 $state.reload()。
好的，我会发布一个示例答案...请接受它并支持它@John
非常感谢 :) 接受答案

标签： javascript angularjs ionic-framework

【解决方案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()

【讨论】：

【解决方案2】：

将新增记录推送到$scope.incomeAccountRecords。

【讨论】：

模型在控制器中正确更新。出于某种原因，该视图未反映更改。
$timeout(function () { $scope.$apply(function () { $scope.incomeAccountRecords.push(<your newly added record>); }); }, 1000);

【解决方案3】：

“加载”函数在“addIncome”中被调用，它正在更新“$scope.incomeAccountRecords”。这应该会自动更新视图。您应该检查“$scope.closeModal()”调用在做什么。可能这会导致问题。

【讨论】：

这是closeModal()函数$scope.modal.hide();

【解决方案4】：

您可以使用 $state.transitionTo 或 $state.go('', {reload: true}) 和 $state.reload。

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

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

【讨论】：

【解决方案5】：

试试这个

  router.setUpRoutes();

【讨论】：