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

问题是由于视图中的函数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>

如果您需要澄清，请告诉我:)）

Answer 2

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

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

试图理解角度范围

2 个答案: