试图理解角度范围

Question

我写了一个代码笔来更好地解释我对角度范围的困惑。

从下面的脚本中，我的起始余额为 20000，我想在记录新交易后显示余额的变化，但是，我得到了这个我无法解释的奇怪结果。有人可以帮忙吗？我做错了什么？

提前致谢！

var transactionApp = angular.module('transactionApp', []);

transactionApp.controller("transactionCtrl", ['$scope',
  function($scope) {
    $scope.transactions = [100, -200, 500, 10000, -2000];
    $scope.balance = 20000;
    $scope.updateBalance = function(balance, transaction) {
      $scope.balance += transaction;
      return $scope.balance;
    }
  }
])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="transactionApp">
  <div ng-controller="transactionCtrl">
    Current Balance: {{balance}}
    <br/>Transaction history:
    <ul>
      <li ng-repeat="transaction in transactions">
        Transaction:{{transaction}}
        <br/>Balance: {{updateBalance(balance, transaction)}}
      </li>
    </ul>
  </div>
</div>

Answer 1

基本上是@Treeless 提到的一个例子。 plnkr

$scope.clickBalance = function(transaction) {
  return $scope.balance += transaction;
};

Answer 2

问题在于视图中的函数 updateBalance。它被 Angular 调用并运行它的摘要循环。每当这些变量更改值时，摘要循环都会通过并更新/运行“{{}}”中的任何变量/函数。在这种情况下，由于余额变量的变化，它会多次运行您的 updateBalance 函数。

解决您当前遇到的问题。我会将更新余额移动到一个按钮。单击按钮运行 updateBalance 功能。或者将更新余额完全从您的视图中取出并在您的控制器中使用它，迭代交易并手动从您的余额中减去值。

希望对您有所帮助。 :)

还有一个关于摘要周期的问题：when $digest cycle is called?

更新（按要求修复逻辑）：

var transactionApp = angular.module('transactionApp', []);

transactionApp.controller("transactionCtrl", ['$scope',
  function($scope) {
    $scope.transactions = [100, -200, 500, 10000, -2000];
    $scope.balance = 20000;

    $scope.getBalanceAfterTransaction = function(transaction){
       $scope.balance += transaction
       return $scope.balance;
    }
  }
])


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="transactionApp">
  <div ng-controller="transactionCtrl">
    Current Balance: {{balance}}
    <br/>Transaction history:
    <ul>
      <li ng-repeat="transaction in transactions">
        Transaction:{{transaction}}
        <br/>Balance: {{getBalanceAfterTransaction(transaction)}}
      </li>
    </ul>
  </div>
</div>

如果您需要更多说明，请告诉我:)