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

标签 javascript angularjs kendo-ui datepicker

这是我的代码:

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/

相关文章:

javascript - 实现 Jquery show()?

javascript - Opera:无法从 window.open() 获取加载事件

javascript - 如何让 Protractor 不等待 $timeout?

kendo-ui - 如何在Kendo UI Grid中动态更改页面大小

javascript - 如何在 Chrome 扩展程序中将 URL 添加到下载管理器?

html - 我如何将值从 Angular 形式转移到服务器nodejs

angularjs - 如果在 AngularJS 中满足条件,则选择用于选择选项菜单

javascript - 如何修复导致 IE 8 故障的自定义 Kendo UI 主题 CSS?

angularjs - 如何在 angularjs 中使用 kendo ui listview

javascript - Materialize CSS,显示自动完成芯片的图像