我的范围内有一个日期过滤字符串。
$scope.myModel = {date:""};
我还有一个 jQuery 日期选择器
<input date-value="myModel.date" date-picker />
在指令中更新此字符串(使用 AngularJS - Attribute directive input value change )
.directive('datePicker', function ($timeout) {
return {
scope: {
dateValue: "=?",
},
link : function (scope, elem, attrs) {
$timeout(function() {
elem.data('date-value', scope.dateValue);
elem.bind('change paste', function (blurEvent) {
if (elem.data('date-value') != elem.val()) {
console.log('value changed, old value is:' + elem.data('date-value') +'new value is: ' + elem.val());
elem.data('date-value', elem.val());
scope.dateValue = elem.val();
}
});
});
},
};
});
根范围日期已正确更新,我可以成功将其发送到服务器,但我想在日期更改时执行某些操作。我的函数在页面初始化时被调用一次,然后就再也不会调用了。
$scope.$watch("myModel.date", function(newVal, oldVal) {
console.log("newVal: " + newVal + ' oldVal:' + oldVal);
if (newVal == oldVal) {
return;
}
// do something
});
我在这里做错了什么?
最佳答案
我在其他一些堆栈溢出帖子中读到,您可以通过scope.apply()强制检查您的范围,但我的摘要中的范围与我的 Controller 中的范围不同。所以这是可行的,但我对 Angular 和摘要了解不够,无法解释原因。
elem.bind('change paste', function (blurEvent) {
if (elem.data('date-value') != elem.val()) {
console.log('value changed, old value is:' + elem.data('date-value') +'new value is: ' + elem.val());
elem.data('date-value', elem.val());
scope.dateValue = elem.val();
if (!scope.$$phase) {scope.$apply();}
}
});
无论如何,这看起来太复杂了,当我在完成选择之前单击框时,元素绑定(bind)被触发。我最终在 jQuery datePicker 参数的 onClose 上设置了一个函数调用。
datePickerParams = {
controlType : "select",
timeFormat : "hh:mm TT",
onClose : function(dateText, inst) {
$scope.myModel.dateText = dateText;
// do stuff
}
};
然后将其传递给指令。
.directive('datePicker', function ($timeout) {
return {
scope: {
datetimePickerParams: "=",
},
link : function (scope, elem, attrs) {
$timeout(function() {
elem.datetimepicker(scope.datetimePickerParams)
});
},
};
});
(也许是时候看看 Angular 日期选择器并远离 jquery 了。)
关于javascript - AngularJS 范围监视未触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28356663/