角度$ applyはビューを更新しません

Question

私はフォームを提出すると、オブジェクトを配列にプッシュします。そのフォームの下には、その配列内のすべてのアイテムを表示するテーブルがあります。新しいアイテムがプッシュされたときにテーブルを自動的に更新する（ページを更新せずに）。私のコントローラで

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

：

送信ボタンを

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

しかし、それは動作しません。 私は$ watchサービスのようなさまざまなアプローチを試みましたが、私は同じ結果を得ています。

表

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

コントローラ

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); 
    }; 
}]); 

支払い - 配列操作のための私のサービス。私はディレクティブを作成し、そのテーブルを表示するには

フォーム

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

。

Answer 1

$scope.$applyおよび$scope.$digestは、サードパーティのライブラリやテストの作業に適しています。あなたのケースでは、Angularはあなたの変更をよく承知しています。新しいアイテムを提出した後にサービスに存在するpayments配列が再度照会されるべきです（配列への直接参照がない限り、照会は行われません）。

ビュー

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

コントローラ

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