Angular $ apply aktualisiert die Ansicht nicht

Question

Ich habe ein Formular, wenn ich es abschicke, schiebt es ein Objekt in mein Array. Unter diesem Formular habe ich eine Tabelle, die alle Elemente in diesem Array zeigt. Ich möchte, dass meine Tabelle automatisch aktualisiert wird (ohne die Seite zu aktualisieren), wenn ein neues Element verschoben wird.

Submit-Button:

<button type="submit" class="btn btn-default" ng-click="updateTable()">Pay</button> 

In meinem Controller:

$scope.updateTable = function() { 
    setTimeout(function() { 
     $scope.$apply(); 
     $scope.$digest(); 
    }, 0); 
    }; 

Allerdings funktioniert es nicht. Ich versuchte verschiedene Ansätze wie $ Watch Service, aber ich habe das gleiche Ergebnis.

Tabelle

<div class="row paytable"> 
    <div class="col-xs-10 col-xs-offset-1"> 
    {{payments.length}} 
    <table class="table table-hover "> 
     <tr> 
     <td>Id</td> 
     <td>Amount</td> 
     <td>Cause</td> 
     </tr> 
     <tr ng-repeat="item in payments"> 
     <td>{{item.id}}</td> 
     <td>{{item.amount}}</td> 
     <td>{{item.cause}}</td> 
     </tr> 
    </table> 
    </div> 
</div> 

-Controller

app.controller('mainController', [ 'user', '$rootScope', '$scope', 'payment', '$timeout', function(user, $rootScope, $scope, payment, $timeout) { 

    user.getUsers(); 
    user.newUser(); 
    $rootScope.currentUser = user.currentUser(); 

    $scope.payments = payment.getPayments(); 
    $scope.newPayment = payment.newPayment; 

    $scope.updateTable = function() { 
    setTimeout(function() { 
     console.log('apply ------------'); 
     $scope.$apply(); 
     $scope.$digest(); 
    }, 0); 

    }; 

    $scope.showPayMessage = function() { 
    console.log('im here'); 
    $scope.showSM = true; 
    $timeout(function() { 
     $scope.showSM = false; 
    }, 2000); 
    }; 
}]); 

Zahlung - mein Service für Array-Manipulation.

Formular

<div class="newpay row" > 
    <div class=" col-xs-10 col-xs-offset-1"> 
    <h1>Hello, {{currentUser.name}}</h1> 
    <h4 ng-show="showSM" class="bg-success">Payment confirmed</h4> 
    <form name="inputform" ng-submit="newPayment(amount, cause); showPayMessage();"> 
     <div class="form-group"> 
     <label for="exampleInputEmail1">Amount</label> 
     <input type="number" name="amount" ng-model="amount" class="form-control" id="exampleInputEmail1" placeholder="Amount" required> 

     </div> 
     <div class="form-group"> 
     <label for="exampleInputPassword1">Cause</label> 
     <input type="text" name="cause" ng-model="cause" class="form-control" id="exampleInputPassword1" placeholder="Cause" required> 

     </div> 

     <button type="submit" class="btn btn-default" ng-click="updateTable()">Pay</button> 
    </form> 
    </div> 
</div> 
payments: {{payments.length}} 
<payments-table payments="payments"></payments-table> 

die Tabelle anzuzeigen I Richtlinie erstellt.

Answer 1

$scope.$apply und $scope.$digest sind besser geeignet für die Arbeit mit 3rd-Party-Bibliotheken oder Tests. In Ihrem Fall ist sich Angular Ihrer Änderungen bewusst. Die Sache ist, Ihr payments Array, das sich in einem Dienst befindet, sollte nach dem Senden eines neuen Elements erneut abgefragt werden (es sei denn, Sie haben einen direkten Verweis auf das Array, dann sollte keine Abfrage durchgeführt werden).

So:

Ansicht

<form name="inputform" ng-submit="onSubmit()"> 

-Controller

$scope.onSubmit = function() { 
    newPayment($scope.newItemAmount, $scope.newItemCause); // Assuming they are properties in the controller 
    showPayMessage(); 
    $scope.payments = payment.getPayments(); // getting the updated array 
}