Question

这是我的代码：

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

在初始加载时，datepicker为空。

如果从指令模板中删除ng-model，则datepicker的工作方式与它的初始值相似，但更改datepicker并不会触发表单变脏。

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

Answer 1

可能是因为指令被包装（你的自定义指令包裹了一个将jquery包裹起来的telerik）。只需手动更改它：

 <!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"/>'
            };
         }            
    ])

Kendo UI日期选择器+ AngularJS。初始化时，datepicker为空

1 个答案: