javascript - Angular $apply 不更新 View

Question

我有一个表单，当我提交它时，它会将一些对象推送到我的数组中。在该表单下方有一个表，显示该数组中的所有项目。我希望我的表格在推送新项目时自动更新(无需刷新页面)。

提交按钮:

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

在我的 Controller 中:

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

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

付款 - 我的数组操作服务。

表格

<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 更适合使用第 3 方库或测试。在你的例子中，Angular 很清楚你的改变。问题是，您驻留在服务中的 payment 数组在提交新项目后应该再次查询(除非您直接引用该数组，否则不应进行查询)。

像这样:

查看

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