web-dev-qa-db-fra.com

Angularjs: Actualiser la vue après les modifications du modèle

J'essaie de mettre à jour la vue après avoir ajouté un nouvel enregistrement et mis à jour le modèle. Sur la page des détails du compte de revenu, vous pouvez ajouter un nouvel enregistrement via un formulaire qui s’affiche sous une forme modale. Après la soumission du formulaire, le modal se ferme ajoute le nouvel enregistrement à la base de données et met à jour le modèle.

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

Le problème que je rencontre est après la soumission du formulaire que le modèle est mis à jour (vérifié via console.log ()), mais la vue ne l’est pas. Si j'actualise la page, elle affiche les informations correctes.

J'ai désactivé le cache dans l'état. J'ai essayé d'ajouter $ scope. $ S'applique dans la fonction load () mais cela via une erreur "$ digest déjà en cours" 

Est-il possible d'actualiser la vue après la mise à jour du modèle?

Edit: J'ai pu recharger l'état en injectant $ state dans le contrôleur et en appelant $ state.reload () pour actualiser la 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();
}
javascriptangularjsionic-framework
3
John

S'il vous plaît trouver cette réponse, il peut être utile pour vous 
Comme 
Après avoir terminé vos modifications dans votre boîte modale 

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

voir l'exemple ci-dessous 
1ère méthode 

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

ou 2ème méthode

$state.reload()

5
Anil kumar

Vous pouvez utiliser $ state.transitionTo ou $ state.go ('', {reload: true}) et $ state.reload.

mais si vous voulez que chaque contrôleur soit rechargé après le changement de vue

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

La fonction "load" est appelée dans "addIncome" qui met à jour "$ scope.incomeAccountRecords". Cela devrait automatiquement mettre à jour la vue. Vous devriez vérifier ce que fait l'appel "$ scope.closeModal ()". Cela cause probablement un problème. 

0
Phoenix

Poussez l'enregistrement nouvellement ajouté à $scope.incomeAccountRecords.

0
Hashir Hussain