angular-bootstrap-datetimepicker閉じるをクリックするとカレンダーを閉じる

Question

私は全く新しいです。私は自分のプロジェクトでangular-bootstrap-datetimepickerを使用しようとしています。私のHTMLコードは：

<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.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); 
      } 
     }); 

：オリジナル1は、ディレクティブ内で、次のようになります。

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); 
     } 
     }); 

（コントローラ内部の）私のバージョンなぜか分からない。たぶんそれはちょうどうまく動作しますか？なぜカレンダーの中をクリックするのが他の場所をクリックするのと違いますか？また、私はページに複数のdatepickersを持っているとき、このような複数の関数を作成しないようにしたいと思います。

Answer 1

あなたが望む動作がブートストラップdropdownに組み込まれています。あなたのプロジェクトに既にブートストラップがある場合は、dropdownを使用することを検討してください。

ユーザーがページの別の部分をクリックしたときに'page-clicked'イベントをブロードキャストするページでカスタムディレクティブを作成すると、各コントローラーはそのイベントをスコープでリッスンし、それに応じて反応することができます。