Angular UI 无需 ng-click 即可打开日期选择器弹出窗口

Question

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

  <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 等。

Angular UI 无需 ng-click 即可打开日期选择器弹出窗口

Angular UI datepicker popup open without ng-click

angularjs

angular-ui

angular-ui-bootstrap