javascript - 获取 $watch 不是 AngularJS 中的函数错误

Question

我正在尝试在开始日期大于结束日期时自动更新我的 ui Bootstrap 日期选择器的结束日期。日期选择器在模态中，功能在 AngularJS 中完成。

我见过的所有示例都使用 $watch 和 $scope(即 $scope.$watch)，但我的代码没有 $scope，不确定我的情况下的语法是什么。

我得到:错误:vm.event.$watch 不是函数

Html(最小日期设置为结束日期的“vm.event.startsAt”

      <div class="row">

                <div class="col-md-6">
                START DATE:<br />
                <p class="input-group" style="max-width: 250px">
                <input type="text" class="form-control" readonly datepicker-popup="medium" ng-model="vm.event.startsAt" is-open="vm.event.startOpen" close-text="Close" />
                <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="vm.toggle($event, 'startOpen', vm.event)"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
                </p>
                <timepicker ng-model="vm.event.startsAt" hour-step="1" minute-step="15" show-meridian="true"></timepicker>
                </div>

                <div class="col-md-6">
                END DATE:<br />
                <p class="input-group" style="max-width: 250px">
                <input type="text" class="form-control" readonly datepicker-popup="medium" ng-model="vm.event.endsAt" min-date="vm.event.startsAt" is-open="vm.event.endOpen" close-text="Close" />
                <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="vm.toggle($event, 'endOpen', vm.event)"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
                </p>
                <timepicker ng-model="vm.event.endsAt" hour-step="1" minute-step="15" show-meridian="true"></timepicker>
                </div>
      </div>     

AngularJS

'use strict';

angular
  .module('demo', ['mwl.calendar', 'ui.bootstrap', 'ngTouch', 'ngAnimate', 'ui.bootstrap.demo'])

  .controller('MainCtrl', function ($modal, moment, $http, $location) {

/* 
******************************************
****  Show Event Modal
******************************************
*/
    function showEventModal(action, event, events) {

      var modalInstance;

        modalInstance = $modal.open({
        templateUrl: 'modalEventContent.html',
        controller: function() {
          var vm = this;
          vm.action = action;
          vm.event = event;

          vm.events = events;

          vm.toggle = function($event, field, event) {
                $event.preventDefault();
                $event.stopPropagation();
                vm.event[field] = !vm.event[field];
          };

          // ----------------------------             
          // ------  Problem HERE -------
          // ----------------------------                         
          // ------  Update END DATE based on the START DATE 
          vm.event.$watch('startsAt', function (newVal, oldVal) {
            if(!newVal) return;

            // if the new start date is greater than the current end date .. update the end date
            if(vm.event.endsAt){
              if( +vm.event.endsAt < +vm.event.startsAt ){
                vm.event.endsAt = newVal;
              }
            } else {
              // just set the end date
              vm.event.endsAt = newVal;
            }
          });   


          vm.eventSaved = function(event) { 

               $http.put(urlapievents + event.eventid, vm.event).success(function(eventsuccess){
               }).error(function(err){
                    /* do something with errors */
               });

               modalInstance.close();
          };

          modalInstance.close();
          };

        },
        controllerAs: 'vm'
      });
    }

更新#1

将 $scope 依赖项添加到我的 Controller 中，错误消失了，但函数没有对更改使用react

      // ------  Update END DATE based on the START DATE (only valid for calendar view)
      $scope.$watch('vm.event.startsAt', function (newVal, oldVal) {
        if(!newVal) return;

        // if the new start date is greater than the current end date .. update the end date
        if(vm.event.endsAt){
          if( +vm.event.endsAt < +vm.event.startsAt ){
            vm.event.endsAt = newVal;
          }
        } else {
          // just set the end date
          vm.event.endsAt = newVal;
        }
      });   

Answer 1

将 $scope 依赖项添加到您的 Controller :

.controller('MainCtrl', function ($scope, $modal, moment, $http, $location) { ..}

这就是找不到 $watch 的原因，因为它属于一个不存在的范围对象。