javascript 在 AngularJS 中获取 $watch 不是函数错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33782942/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting $watch is not a function error in AngularJS
提问by user3489502
i'm trying to automatically update the END-DATE of my ui bootstrap datepicker when the START-DATE is greater than the END-DATE. The datepickers are inside a modal, and the function is done in AngularJS.
当 START-DATE 大于 END-DATE 时，我试图自动更新我的 ui bootstrap datepicker 的 END-DATE。日期选择器位于模态内，并且该功能在 AngularJS 中完成。
All the examples i've seen use $watch with $scope (i.e $scope.$watch), but the code I have doesn't have $scope, not sure what the syntax would be in my case.
我见过的所有示例都使用 $watch 和 $scope（即 $scope.$watch），但是我的代码没有 $scope，不确定在我的情况下语法是什么。
I'm getting: Error: vm.event.$watch is not a function
我越来越： Error: vm.event.$watch is not a function
Html (min-date is set to "vm.event.startsAt" on the END-DATE
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
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'
});
}
update#1
更新#1
Added the $scope dependency to my controller, the error is gone but the function doesn't react to the change
向我的控制器添加了 $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;
}
});
回答by bosch
add the $scopedependency to your controller:
将$scope依赖项添加到您的控制器：
.controller('MainCtrl', function ($scope, $modal, moment, $http, $location) { ..}
that's why the $watchcouldn't be found, because it belongs to a scopeobject which did not exist.
这就是为什么$watch找不到 ，因为它属于一个不存在的范围对象。
回答by Sean Larkin
So the reason why you are having an issue here is because $watch lives only on the $scope object. Because you are using the bindToControllersyntax you do not use scope and therefore it doesn't exist.
所以你在这里遇到问题的原因是因为 $watch 只存在于 $scope 对象上。因为您使用的bindToController是不使用范围的语法，因此它不存在。
If you wanted to use a $watchin your controller (which is not recommended), you can do so by injecting $scopewith Dependency injection. Then you can attach the $watchwith $scope.$watch
如果你想$watch在你的控制器中使用 a （不推荐），你可以通过注入$scope依赖来实现。然后，你可以附上$watch用$scope.$watch
If you want to use a $watch, it is better to use in a directive. It can be hard to test overall.
如果要使用 a $watch，最好在指令中使用。整体测试可能很困难。
There are certain timepickers like ui-bootstraps uib-timepickerwhich support the ng-changedirective for event handling.
有一些时间选择器，比如ui-bootstraps uib-timepicker，它支持ng-change事件处理指令。
So if your <timepicker></timepicker>element can use ng-changeyou can add that on your element and then call the same validation function you are using in your controller.
因此，如果您的<timepicker></timepicker>元素可以使用，ng-change您可以将其添加到您的元素上，然后调用您在控制器中使用的相同验证函数。
