Question

我创建了这个包含jQuery插件datetimepicker的angular指令。

如何让控制器中定义的默认日期显示为控件中的默认日期？

我尝试了ngModel.$viewValue的多种变体，但无法将yyyy-mm-dd文本显示在控件中。

<div ng-controller="mainController">

    <div class="form-group">
        <div class='input-group date' timepicker ng-model="date1">
            <input type='text' class="form-control" />
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
        </div>
        <div>{{date1 | date:'yyyy-MM-dd HH:mm'}}</div>  
    </div>

    <div class="form-group">
        <div class='input-group date' timepicker ng-model="date2">
            <input type='text' class="form-control" />
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
        </div>
        <div>{{date2 | date:'yyyy-MM-dd HH:mm'}}</div>
    </div>

</div>

angular.module('myApp', [])
.controller('mainController', function($scope) {
    $scope.date1 = '2015-09-01 00:00';
    $scope.date2 = '2015-09-30 23:59';
})
.directive('timepicker', [

  function() {
    var link;
    link = function(scope, element, attr, ngModel) {
        console.log(ngModel);
        element = $(element);
        element.datetimepicker({
            format: 'YYYY-MM-DD HH:mm',
            defaultDate: ngModel.$viewValue
        });
        element.on('dp.change', function(event) {
            scope.$apply(function() {
                ngModel.$setViewValue(event.date._d);
            });
        });
    };

    return {
      restrict: 'A',
      link: link,
      require: 'ngModel'
    };
  }
])

Answer 1

我认为你可以在这里使用isolated scope指令，并将ngModel指令值公开给timepicker指令范围，如下所示。

return {
  restrict: 'A',
  scope: {
    date: '=ngModel'
  },
  link: link
};

element.datetimepicker({
   format: 'YYYY-MM-DD HH:mm',
   defaultDate: scope.date
});

此处每个指令实例都有唯一的scope，并且该范围正在将ngModel指令值共享为scope.date。并且不需要require属性。

这是DEMO

这是指令DOC，有关详细信息，请参阅Isolating the Scope of a Directive部分。

这是一个很好的article。

请注意，您也可以使用共享范围指令，如下所示。

element.datetimepicker({
   format: 'YYYY-MM-DD HH:mm',
   defaultDate: scope[attr.ngModel]
});

这是DEMO

如何使用ngmodel在datetimepicker中设置默认日期？

1 个答案: