angular-bootstrap-datetimepicker Kalender schließen, wenn außerhalb geklickt wird

Question

Ich bin total neu in eckig und ich versuche angular-bootstrap-datetimepicker in meinem Projekt zu verwenden. Mein html-Code ist:

Ich wollte einen Kalender schließen, wenn der Benutzer irgendwo außerhalb klickt. Ich kopierte fast den Code von ui.bootstrap. Original ist im Inneren Richtlinie und sieht wie folgt aus:

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

Meine Version (im Controller):

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

I entfernt "Element" Variable, weil ich es nicht in meinem Controller und es scheint, zu arbeiten, aber ich weiß nicht warum. Vielleicht funktioniert es nur zufällig? Warum klickt man in den Kalender anders als irgendwo anders zu klicken? Darüber hinaus möchte ich vermeiden, mehrere Funktionen wie diese zu erstellen, wenn ich mehrere Datumsauswahl auf einer Seite habe.

Answer 1

Das gewünschte Verhalten ist in den Bootstrap integriert dropdown, wenn Sie bootstrap bereits in Ihrem Projekt haben, könnten Sie die Verwendung von dropdown in Betracht ziehen. Wenn nicht, könnten Sie eine benutzerdefinierte Anweisung auf der Seite erstellen, die ein 'page-clicked'-Ereignis ausstrahlt, wenn der Benutzer auf einen anderen Teil der Seite klickt. Dann kann jeder Controller in seinem Bereich auf dieses Ereignis warten und entsprechend reagieren.