javascript - AngularJS 中的 View 未更新

Question

在我的应用程序中，我正在计算总账单并显示在我的 View 上。第一次它工作正常。但是当我增加 $scope.bill_total 时，它并没有更新 View 。但在控制台中它正在发生变化。我已经尝试过 $scope.$apply(). 但它抛出错误。在一般情况下 View 未更新的原因是什么有人能解释一下吗？

HTML

 <div id="total" class="col col-30 cart-item text-right text-black">
            Bill Total<br/> ${{ bill_total }}
        </div>
<button class="button button-small button-light"  ng-click="increment()"> +</button>

JavaScript:

$scope.calculate = function () {
    $scope.bill_total = parseFloat($scope.gross_bill) + parseFloat($scope.taxes) + parseFloat($scope.tips);
}

$scope.calculate();

$scope.increment = function () {
    $scope.gross_bill++;
    $scope.calculate();
    console.log($scope.bill_total )
}       

Answer 1

需要查看更多代码，但是当您期望 bill_total 发生更改时，为什么还要更新gross_bill？

如果您没有在模板中使用gross_bill，则不会监视它，因此更改其值不会重绘 View 。

因此，修改模板中绑定(bind)的内容。如果出于某种原因我错了，您需要执行scope.apply，也许就是这种情况，请尝试将代码包装在 $timeout 中，这将触发摘要，这是“推荐”解决方案，优于直接调用 apply。

notes on apply vs timeout