剑道 UI 日期选择器 + AngularJS。初始化日期选择器为空答案

【问题标题】：Kendo UI Date Picker + AngularJS. On initialisation datepicker is empty剑道 UI 日期选择器 + AngularJS。初始化日期选择器为空
【发布时间】：2015-10-05 06:00:50
【问题描述】：

这是我的代码：

http://dojo.telerik.com/@CarloCruz/IjEZa

在初始加载时，日期选择器为空。

如果您从指令模板中删除 ng-model，日期选择器的工作方式与它的初始值一样，但更改日期选择器不会触发表单变脏。

如何设置初始值并能够触发角形的$dirty？

【问题讨论】：

标签： javascript angularjs kendo-ui datepicker

【解决方案1】：

可能是因为指令被包装了（您的自定义指令是包装了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"/>'
            };
         }            
    ])

【讨论】：

感谢@diana 的回答，但您的解决方案在更改日期选择器时不会导致表单变为 $dirty。
@CarloCruz 抱歉，我的错误，只是错过了您需要脏表格这一事实，请查看编辑版本以获取解决方案。