Question

在我的应用中，我正在计算总账单并显示在我的视图上。第一次工作正常。但是当我增加$scope.bill_total时，它不会更新视图。但在控制台中它正在改变。我已经尝试了$scope.$apply().但是它引发了错误。在一般情况下观点没有得到更新的原因是什么？有人可以解释吗？

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，则不会对其进行监视，因此更改其值不会重绘视图。

因此，修改模板中绑定的内容。如果有一些原因我错了你需要做scope.apply，也许就是这种情况，尝试将你的代码包装在$ timeout中，这将触发摘要，是直接调用apply的“推荐”解决方案。 / p>

notes on apply vs timeout

Answer 2

因为我们只能看到你的部分源代码，所以它看起来都很好。要测试每个文件是否在同一摘要范围内，您可以手动执行异步应用：

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

并请仔细检查以下几点：

如果bill_total是一次性约束{{:: bill_total}}
如果使用单向绑定bill_total

Answer 3

问题可能是$scope.bill_total不是对象，因此无法观看。您需要将其更改为$scope.bill_total = {value: 3}之类的内容。然后，当您更新值时，它应该在您的视图中正确更新。由于您已经处于摘要周期内，因此没有理由致电$scope.apply。

请务必将您的HTML更改为：

<div id="total" class="col col-30 cart-item text-right text-black">
  Bill Total<br/> ${{ bill_total.value }}
</div>

视图未在AngularJS中更新

3 个答案: