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

내가 제거 "요소"변수 내가 내 컨트롤러에이 없기 때문에 그것은 보인다 일할 수는 있지만 왜 그런지 모르겠습니다. 우연히 만난 것일까 요? 캘린더 내부를 클릭하는 것이 다른 곳을 클릭하는 것과 다른 이유는 무엇입니까? 또한 페이지에 여러 개의 datepickers가있을 때 이와 같은 여러 함수를 만드는 것을 피하기를 원합니다.

Answer 1

원하는 동작은 부트 스트랩 dropdown에 내장되어 있습니다. 이미 프로젝트에 부트 스트랩이있는 경우 dropdown을 사용하는 것이 좋습니다.

그렇지 않은 경우 사용자가 페이지의 다른 부분을 클릭 할 때 'page-clicked' 이벤트를 브로드 캐스트하는 페이지에서 사용자 지정 지정 문을 만들면 각 컨트롤러가 해당 범위에서 해당 이벤트를 수신하고 그에 따라 대응할 수 있습니다.