这是我的代码:
http://dojo.telerik.com/@CarloCruz/IjEZa
初始加载时,日期选择器为空。
如果从指令模板中删除 ng-model,日期选择器将按照其初始值正常工作,但更改日期选择器不会触发表单变脏。
如何设置初始值并能够触发 Angular 形式的$dirty?
最佳答案
可能是因为指令被包装(您的自定义指令正在包装 telerik 指令,而 telerik 指令又包装 jquery 指令)。只需手动更改它,如下所示:
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/dropdownlist/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.930/styles/kendo.blueopal.min.css" />
<script src="//kendo.cdn.telerik.com/2015.3.930/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content" ng-controller="MyCtrl">
<div ng-form="testform">
{{testform.$dirty}}
{{dateAttach}}<br />
<my-datepicker form="testform" ng-model="dateAttach" required></my-datepicker>
</div>
</div>
</div>
<script>
angular.module("KendoDemos", ["kendo.directives"])
.controller("MyCtrl", function($scope) {
$scope.dateAttach = new Date(1444015467000);
}).controller('DatePickerCtrl', [
'$scope', function($scope) {
$scope.$watch('date', function(oldVal, newVal) {
if(oldVal != newVal){
$scope.form.$dirty = true;
}
});
}
]).directive('myDatepicker', [
function() {
return {
restrict: 'E',
scope: {
date: '=ngModel',
form: '='
},
controller: 'DatePickerCtrl',
template: '{{date}}<br /><input kendo-date-picker="datePicker" k-ng-model="date" k-ng-delay="date"/>'
};
}
])
关于javascript - Kendo UI 日期选择器 + AngularJS。初始化时日期选择器为空,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32942125/