angular-bootstrap-datetimepicker當外部點擊時關閉日曆

我完全不熟悉angular，我嘗試在我的項目中使用angular-bootstrap-datetimepicker。我的html代碼是：angular-bootstrap-datetimepicker當外部點擊時關閉日曆

<span class="input-group-btn" ng-class="{open: openedDP}"> 
     <button type="button" class="btn btn-default btn-sm" ng-click="open()"> 
      <i class="glyphicon glyphicon-calendar"></i> 
     </button> 
     <ul class="dropdown-menu" role="menu"> 
      <datetimepicker ng-model="abc" 
          on-set-time="close(new, old)"> 
      </datetimepicker> 
     </ul> 
</span> 
<input id="abc" ng-model="abc" class="form-control" date-time-input="DD-MM-YYYY HH:mm:SS" />

我想關閉一個日曆，當用戶點擊任何地方以外的任何地方。我幾乎從ui.bootstrap複製粘貼了代碼。原來一個是內部指令，看起來像這樣：

var documentClickBind = function(event) { 
     if (scope.isOpen && event.target !== element[0]) { 
      scope.$apply(function() { 
      scope.isOpen = false; 
      }); 
     } 
     }; 

scope.$watch('isOpen', function(value) { 
     if (value) { 
      scope.$broadcast('datepicker.focus'); 
      scope.position = appendToBody ? $position.offset(element) : $position.position(element); 
      scope.position.top = scope.position.top + element.prop('offsetHeight'); 

      $document.bind('click', documentClickBind); 
     } else { 
      $document.unbind('click', documentClickBind); 
     } 
     });

我的版本（內部控制器）：

var documentClickBind = function (event) { 
    if ($scope.openedDP) { 
     $scope.$apply(function() { 
      $scope.openedDP = false; 
     }); 
     } 
}; 

    $scope.$watch('openedDP', function (value) { 
      if (value) { 
       $timeout(function() { 
        $document.bind('click', documentClickBind); 
       }, 0, false); 
      } else { 
       $document.unbind('click', documentClickBind); 
      } 
     });

我刪除了「元素」的變量，因爲我沒有在我的控制器，它似乎去工作，但我不知道爲什麼。也許它只是偶然的工作？爲什麼在日曆內點擊與在其他地方點擊不同？另外，我想避免在頁面上使用多個日期選擇器時創建多個這樣的功能。

來源

2016-09-21 k_wit

我想你是指[此datetimepicker]（https://dalelotts.github.io/angular-bootstrap-datetimepicker/）。這是默認行爲，對嗎？ – Paritosh

如果沒有這段代碼，我必須再次點擊相同的按鈕才能關閉日曆。 –

你想要的行爲是內置於引導dropdown，如果你已經在你的項目中引導，你可以考慮使用它的dropdown。

如果沒有，您可以在頁面上創建一個自定義指令，當用戶點擊頁面的另一部分時，廣播一個'page-clicked'事件，然後每個控制器可以在其作用域上偵聽該事件，並相應地作出反應。

來源

2016-10-13 12:51:12

angular-bootstrap-datetimepicker當外部點擊時關閉日曆

回答

相關問題