Angularjs: Refresh view after model changes

Question

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

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

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.

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"

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.

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

@Anilkumar This worked. I added $state as a dependency in the controller then called $state.reload() at the end of the addIncome function. — John
– John, Commented Feb 12, 2016 at 6:50
Ok I will post a sample answer ... Please accept it and Upvote it @John — Anil kumar
– Anil kumar, Commented Feb 12, 2016 at 6:52

Durgpal Singh · Accepted Answer · 2018-04-28 06:37:11Z

6

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()

edited Apr 28, 2018 at 6:37

Durgpal Singh

12k4 gold badges40 silver badges51 bronze badges

answered Feb 12, 2016 at 6:57

Anil kumar

9287 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hashir Hussain · Accepted Answer · 2016-02-12 06:24:11Z

0

Push newly added record to $scope.incomeAccountRecords.

answered Feb 12, 2016 at 6:24

Hashir Hussain

6924 gold badges9 silver badges28 bronze badges

2 Comments

John Over a year ago

The model is updated correctly in the controller. The view for some reason does not reflect the change.

Hashir Hussain Over a year ago

$timeout(function () {         $scope.$apply(function () {             $scope.incomeAccountRecords.push(<your newly added record>);         });     }, 1000);

Phoenix · Accepted Answer · 2016-02-12 06:54:15Z

0

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.

answered Feb 12, 2016 at 6:54

Phoenix

11 bronze badge

1 Comment

John Over a year ago

this is the closeModal() function $scope.modal.hide();

EduLopez · Accepted Answer · 2017-02-05 23:33:40Z

0

You can use $state.transitionTo or $state.go('', {reload: true}) and $state.reload.

but if you want to make each controller reload after view change

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

answered Feb 5, 2017 at 23:33

EduLopez

7199 silver badges18 bronze badges

Comments

Suresh B · Accepted Answer · 2016-02-12 06:00:45Z

-2

try this

  router.setUpRoutes();

answered Feb 12, 2016 at 6:00

Suresh B

1,6521 gold badge18 silver badges35 bronze badges

Collectives™ on Stack Overflow

Angularjs: Refresh view after model changes

5 Answers 5

Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related