试图理解角度范围

trying to understand angular scope

本文关键字：范围      更新时间：2023-09-26

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

从下面的脚本中，我有一个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>

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

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

问题是由于视图中的函数updateBalance引起的。它被调用，Angular运行其摘要循环。摘要循环会在"｛｛｝｝"中的任何变量/函数更改值时执行并更新/运行这些变量/函数。在这种情况下，由于平衡变量的变化，它会多次运行updateBalance函数。

要解决当前的问题。我会把更新余额移到一个按钮上。单击按钮后，运行updateBalance功能。或者将更新余额完全从视图中删除，并在控制器中使用它，迭代事务并手动从余额中减去值。

希望能有所帮助。：）

关于摘要周期还有另一个问题：什么时候调用$digest周期？

更新（根据要求修复逻辑）：

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>

如果您需要进一步澄清，请告诉我：）

相关文章：