Angularjs: Actualiser l'affichage après les changements de modèle

Je suis en train de mettre à jour la vue après l'ajout d'un nouvel enregistrement et la mise à jour du modèle. Sur le compte des revenus des détails page, vous pouvez ajouter un nouvel enregistrement via un formulaire qui apparaît dans un modal. Après la soumission du formulaire modal 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();
    }
})
...

La question que je suis en cours d'exécution dans l'est après la soumission du formulaire, le modèle est d'obtenir des mises à jour et vérifiées par le biais de la console.log ()), mais la vue ne l'est pas. Si j'actualise la page, il affiche les informations correctes.

J'ai désactivé le cache dans l'état. J'ai essayé d'ajouter $scope.$appliquer dans la fonction load() mais que, par une erreur "$digest déjà en cours"

Est-il un moyen pour actualiser l'affichage une fois que le modèle est mis à jour?

Edit: j'ai été en mesure de recharger l'état par l'injection de $l'état dans le contrôleur et l'appel de $état.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();
}
  • Après la mise à jour des données... essayez de recharger la state
  • Comment voulez-vous recharger l'état de l'intérieur de la manette?
  • Cela a fonctionné. J'ai ajouté $état de dépendance dans le contrôleur appelé $état.reload() à la fin de la addIncome fonction.
  • Ok je vais poster un exemple de réponse ... s'il vous Plaît accepter et Upvote c' @John
  • Merci beaucoup 🙂 pour l'acceptation de la réponse
InformationsquelleAutor John | 2016-02-12