Question

我有这个控制器：

cart.js

var cart = angular.module('tutorialAngularApp');
cart.factory('Items', function () {


var items = {};
  items.query = function () {
    return [
      {title: 'Paint pots', description: 'Pots full of paint', quantity: 8, price: 3.95},
      {title: 'Polka dots', description: 'Dots with polka', quantity: 17, price: 2.95},
      {title: 'Pebbles', description: 'Just little rocks', quantity: 5, price: 6.95}
    ];
  };
  return items;
});

cart.controller('CartCtrl', function ($scope, Items) {
  $scope.bill = {};
  $scope.discount = {};
  $scope.items = Items.query();

  $scope.totalCart = function () {
    var total = 0;
    for (var i = 0, len = $scope.items.length; i < len; i++) {
      total = total + $scope.items[i].price * $scope.items[i].quantity;
    }
    return total;
  };

  $scope.subtotal = function () {
    return $scope.totalCart() - $scope.discount;
  };

  $scope.calculateDiscount = function (newValue, $scope) {
    $scope.discount = newValue > 100 ? 10 : 0;
  };

  $scope.$watch($scope.totalCart, $scope.calculateDiscount);
});

我正试图在这个html视图中显示数据：

<div>
  <div ng-repeat="item in items">
    <span>{{item.title}}</span>
    <input ng-model="item.quantity">
    <span>{{item.price | currency | number: 2}}</span>

    <p></p>
    <span>{{item.price * item.quantity | currency | number: 2}}</span>

    <p></p>
  </div>
  <div>Total: {{totalCart() | currency}}</div>
  <p></p>

  <div>Discount: {{discount | currency}}</div>
  <p></p>

  <div>Subtotal: {{subtotal() | currency}}</div>
  <p></p>
</div>

我收到错误

TypeError: Cannot assign to read only property 'discount'

设置每个其他变量时，计算总值。但我不明白为什么会这样，因为它被正确定义。这段代码只是Yeoman项目的一部分。任何人似乎都知道这是什么问题？

Answer 1

我认为问题与您的函数$scope.calculateDiscount有关。

$scope.$watch包含两个参数，一个变量和一个具有oldValue和newValue（非$scope）的函数。有关如何使用$watch的信息，请查看here。

Answer 2

$ watch回调函数的第二个参数是旧值，而不是$ scope，作为第三个参数传递作用域，因此你的calculateDiscount函数可能看起来像

calculateDiscount(newValue,oldValue,$scope)

但请注意，因为calculateDiscount已经可以访问$ scope，因为它是在外部函数作用域中定义的，所以不需要第三个参数。所以你也可以使用

calculateDiscount(newValue,oldValue)

但是如果你在控制器之外定义了calculateDiscount而不是你需要使用第三个参数。

$watch reference

无法分配只读Angular

2 个答案: