Javascript 角度：当输入更改为+时更新视图。此/$范围

我有几个问题想不通。我试图做一把小提琴来显示我的问题，但我似乎无法让它工作，尽管它在我的应用程序中工作。。值显示在屏幕上，可通过输入框进行操作。但是现在，如果用户更改值，$scope.booking.nights将不会更新。在我的应用程序中，当用户填写到达日期和离开日期时，它会调用calNights函数，为我们提供夜数

有人能看出我的错误吗

由于我无法让小提琴工作，我将在这里张贴代码

控制器：

angular.module('squawsomeApp')
  .controller('BookingCtrl', function($scope){

    $scope.values = [1,2,3,4,5];

    // var self = this;

    function parseDate(str) {
      var mdy = str.split('/')
      return new Date(mdy[2], mdy[0]-1, mdy[1]);
    }

    function daydiff(first, second) {
      return (second-first)/(1000*60*60*24);
    }

    var calCheckIn = new Pikaday({
        field: document.getElementById('checkin'),
        format: 'MM/DD/YYYY',
        onSelect: function() {
          $scope.booking.checkin = null;
          $scope.booking.checkin = this.toString('MM/DD/YYYY');
          calNights();
        }
    });

    var calCheckOut = new Pikaday({
        field: document.getElementById('checkout'),
        minDate: $scope.checkin,
        format: 'DD/MM/YYYY',
        onSelect: function() {
          $scope.booking.checkout = this.toString('MM/DD/YYYY');
          calNights();
        }
    });

    var calNights = function(){
      console.log('outside')
      $scope.booking.nights = null;
      console.log($scope.booking.nights)
      if ($scope.booking.checkin && $scope.booking.checkout) {
        console.log('inside')
        $scope.booking.nights = daydiff(parseDate($scope.booking.checkin), parseDate($scope.booking.checkout));
        // return daydiff(parseDate(self.booking.checkin), parseDate(self.booking.checkout))
        console.log($scope.booking.nights)
      }
    };

    var calCost = function(){
      if ($scope.booking.nights < 7) {
        $scope.booking.cost = 145;
      } else if ($scope.booking.nights >= 7 && $scope.booking.nights <= 29){
        $scope.cost = 135;
      } else if ($scope.booking.nights >= 29){
        $scope.booking.cost = 120;
      }
    };

    $scope.booking = {
      checkin: null,
      checkout: null,
      guests: null,
      nights: null, //daydiff(parseDate(self.booking.checkin), parseDate(self.booking.checkout))
      cost: null,
      pretotal: this.nights * this.cost,
      tax: 0,
      total: this.pretotal + this.tax
    };

  });

但这确实：

$scope.booking = {
  checkin: null,
  checkout: null,
  guests: null,
  nights: null, 
  cost: null,
  pretotal: this.nights * this.cost,
  tax: 0,
  total: this.pretotal + this.tax
};

---

scope对象$scope使控制器和视图能够相互通信。如果将属性放在self而不是scope对象上，视图将无法使用它们，因为它们是控制器本身的属性，而不是scope对象。在视图中绑定数据输入元素时，Angular会在创建并传递给控制器的scope对象中查找绑定属性。如果找不到它们，它将在scope对象中创建属性并将输入绑定到它们。另一方面，如果您拥有在控制器中给定值的scope对象的属性，则Angular将该属性绑定到您将数据绑定到该属性的输入。因此，输入将在页面上有一个初始值，即控制器设置的值。

您可以使用this/self语法，但您应该使用ControllerAs语法

<div ng-controller="BookingCtrl as book">
  <p>{{ book.booking.checkin }}</p>
</div>

阅读文档中的所有内容：

$scope.booking = {
  checkin: null,
  checkout: null,
  guests: null,
  nights: null, 
  cost: null,
  pretotal: this.nights * this.cost,
  tax: 0,
  total: this.pretotal + this.tax
};

<div ng-controller="BookingCtrl as book">
  <p>{{ book.booking.checkin }}</p>
</div>