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

Question

我正在尝试在 START-DATE 大于 END-DATE 时自动更新我的 ui bootstrap datepicker 的 END-DATE。日期选择器位于模态框内，功能在 AngularJS 中完成。

我看到的所有示例都使用 $watch 和 $scope（即 $scope.$watch），但我的代码没有 $scope，不确定在我的情况下的语法是什么。

我收到：Error: vm.event.$watch is not a function

Html（在 END-DATE 将最小日期设置为“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 依赖，错误消失了，但函数对更改没有反应

      // ------  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('MainCtrl', function ($scope, $modal, moment, $http, $location) { ..}

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

Answer 2

所以你在这里遇到问题的原因是因为 $watch 只存在于 $scope 对象上。因为您使用的是bindToController 语法，所以您没有使用范围，因此它不存在。

如果您想在控制器中使用$watch（不建议这样做），您可以通过使用依赖注入注入 $scope 来实现。然后你可以附加$watch 和$scope.$watch

如果你想使用$watch，最好在指令中使用。整体测试可能很困难。

有一些时间选择器，如 ui-bootstraps uib-timepicker，支持 ng-change 指令进行事件处理。

因此，如果您的 <timepicker></timepicker> 元素可以使用 ng-change，您可以将其添加到您的元素上，然后调用您在控制器中使用的相同验证函数。

Here is a plunker using the ng-change of a timepicker