Question

根据弹出式样式的datepicker用户的官方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属性的情况下打开datepicker弹出窗口？

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> 
...

演示 - ＆gt;的 http://plnkr.co/edit/H6hgYdF420R4IKdjCBGM?p=preview

现在展开指令/模板，在datepicker上设置所需的其他默认属性，如min-date等。

Angular UI datepicker弹出窗口打开，没有ng-click

1 个答案: