Angular UI datepicker 弹出窗口在没有 ng-click 的情况下打开

Question

根据弹出样式的日期选择器用户的官方 Angular UI 文档，我需要创建带有 ng-click 事件的附加按钮，以更改绑定到 is-open 属性的 $scope 属性，如下所示：

  <p class="input-group">
     <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
     <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
     </span>
  </p>

在我的应用程序中，每个视图可能有超过 10 个这样的日期选择器，因此我需要为每个视图实现 is-open 属性的属性。

有没有办法打开没有is-open 属性的日期选择器弹出窗口？

Answer 1

如果您有 +10 个日期选择器并一遍又一遍地重复相同的标记，并且需要创建 $scope 函数而没有任何实际用途 - 那么几乎是在尖叫着指令来完成琐碎的任务！您正在重复的标记可以放在模板中：

<script type="text/ng-template" id="dateAutomater.html">
  <input type="text" class="form-control"/>
  <span class="input-group-btn">
    <button type="button" class="btn btn-default">
      <i class="glyphicon glyphicon-calendar"></i>
    </button>
  </span>     
</script>  

指令（最基本的）可能如下所示：

.directive('dateAutomater', ['$compile',  function($compile) {
  return {       
    transclude: true,        
    templateUrl: 'dateAutomater.html',
    restrict: 'AE',                   
    link: function ($scope, element, attrs) {
      $scope.dateInfo = $scope.dateInfo || {};
      var dateInfo = $scope.dateInfo,
          input = element.find('input'),    
          button = element.find('button'),    
          name = input.name || 'date'+Object.keys($scope.dateInfo).length,
          info = {
            open: false,
            click: function() {
              this.open = true
            }
          }   

      dateInfo[name] = info;
      input.attr('ng-model', attrs.dateAutomater);
      input.attr('uib-datepicker-popup', 'dd-MMMM-yyyy');
      input.attr('is-open', 'dateInfo[\"'+name+'\"].open')
      button.attr('ng-click', 'dateInfo[\"'+name+'\"].click()');

      $compile(element.contents())($scope);
    }   
  } 
}])

它只是将model 作为参数，从模板中注入标记并将重要变量is-open 和ng-click 函数绑定到一个自我维护的对象$scope.dateInfo。用法

<p class="input-group" date-automater="dt"></p>
<p class="input-group" date-automater="date"></p>        
<p class="input-group" date-automater="yesterDay"></p> 
...

演示 -> http://plnkr.co/edit/H6hgYdF420R4IKdjCBGM?p=preview

现在展开指令/模板以在日期选择器上设置您想要的其他默认属性，例如min-date 等等。