пытается понять угловую область

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?

Update (Исправление логики по запросу):

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