versucht Winkelbereich zu verstehen

Question

Ich habe einen Codepen geschrieben, um meine Verwirrung auf Winkelbereich besser zu erklären.

Aus dem folgenden Skript, habe ich ein Startguthaben von 20000, ich möchte die Veränderung des Guthabens anzeigen, sobald eine neue Transaktion aufgezeichnet wurde, aber ich bekomme dieses seltsame Ergebnis, das ich nicht erklären kann. Kann mir bitte jemand helfen? Was habe ich falsch gemacht?

Vielen Dank im Voraus!

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

Das Problem ist aufgrund der Funktion updateBalance in der Ansicht. Es wird mit Angular-Läufen seinen Digest-Zyklus aufgerufen. Der Digest-Zyklus durchläuft und aktualisiert/führt alle Variablen/Funktionen innerhalb des '{{}}' aus, wenn diese Variablen Werte ändern. In diesem Fall wird die updateBalance-Funktion mehrmals ausgeführt, da sich die Balance-Variable ändert.

Um das aktuelle Problem zu beheben, das Sie haben. Ich würde die Update-Salden auf eine Schaltfläche verschieben. Klicken Sie auf die Schaltfläche, um die Funktion updateBalance auszuführen. Oder nehmen Sie das Aktualisierungsguthaben vollständig aus Ihrer Sicht und verwenden Sie es in Ihrem Controller, durchlaufen Sie die Transaktionen und subtrahieren Sie die Werte manuell von Ihrem Kontostand.

Hoffnung, die geholfen hat. :)

Hier ist eine andere Frage in Bezug auf den Digest-Zyklus: when $digest cycle is called?

Update (Fixing Logik wie gewünscht):

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> 

Lassen Sie mich wissen, wenn Sie mehr Klärungsbedarf :)

Answer 2

im Grunde ein Beispiel von dem, was @Treeless erwähnt. plnkr

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