div의 Outside를 클릭할 때 div를 숨기는 방법을 잘 모르겠습니다.

div의 Outside를 클릭할 때 div를 숨기는 방법을 잘 모르겠습니다.

다음은 이 질문에 대한 후속 질문입니다.각진포커스가 있는 JS 입력은 목록의 ng-repeat 필터를 삭제합니다.

기본적으로 내 코드는 Angular를 사용합니다.JS를 사용하면 오른쪽에 있는 div(드로어)를 팝업하여 항목 목록을 필터링할 수 있습니다.대부분의 경우 UI가 차단되므로 차단 div를 클릭하면 드로어가 닫힙니다.그러나 UI를 차단하지 않고 사용자가 드로어 바깥쪽을 클릭하여 검색을 취소하거나 페이지에서 다른 항목을 선택할 수 있도록 해야 하는 경우도 있습니다.

처음에 생각한 것은 드로어가 열리면 window.click 핸들러를 클릭하여 드로어 이외의 것을 클릭하면 드로어가 닫힙니다.순수한 JavaScript 앱에서는 그렇게 할 수 있습니다.하지만 Angular에서는 조금 더 어렵다.

다음은 @Yoshy의 jsBin에 기반한 샘플 jsfiddle입니다.http://jsfiddle.net/tpeiffer/kDmn8/

이 샘플의 관련 코드는 다음과 같습니다.기본적으로 사용자가 드로어 바깥쪽을 클릭하면 $scope.togleSearch를 호출하여 $scope.open이 false로 설정됩니다.

코드는 동작하며 $scope.open이 true에서 false로 바뀌어도 DOM은 변경되지 않습니다.이것은 이벤트의 라이프 사이클이나 $scope(별도의 이벤트이기 때문에)를 수정했을 때 원본이 아닌 복사본인 것이 확실합니다.

이것의 궁극적인 목표는 궁극적인 재사용 가능성을 위한 지침이 되는 것입니다.올바른 방향으로 안내해 주시면 감사하겠습니다.

$scope.toggleSearch = function () {

    $scope.open = !$scope.open;

    if ($scope.open) {
        $scope.$window.onclick = function (event) {
            closeSearchWhenClickingElsewhere(event, $scope.toggleSearch);
        };
    } else {
        $scope.$window.onclick = null;
    }
};

그리고.

function closeSearchWhenClickingElsewhere(event, callbackOnClose) {

    var clickedElement = event.target;
    if (!clickedElement) return;

    var elementClasses = clickedElement.classList;
    var clickedOnSearchDrawer = elementClasses.contains('handle-right') 
        || elementClasses.contains('drawer-right') 
        || (clickedElement.parentElement !== null 
            && clickedElement.parentElement.classList.contains('drawer-right'));
    if (!clickedOnSearchDrawer) {
        callbackOnClose();
    }

}

클릭 이벤트가 다이제스트 사이클 밖에서 발생하고 Angular는 $scope.open이 변경되었음을 모르기 때문에 드로어가 닫히지 않습니다.이 문제를 해결하려면 $scope로 전화하십시오.$syslog.open 뒤에 $syslog()가 false로 설정되어 있으면 다이제스트 사이클이 트리거됩니다.

$scope.toggleSearch = function () {
    $scope.open = !$scope.open;
    if ($scope.open) {
        $scope.$window.onclick = function (event) {
            closeSearchWhenClickingElsewhere(event, $scope.toggleSearch);
        };
    } else {
        $scope.open = false;
        $scope.$window.onclick = null;
        $scope.$apply(); //--> trigger digest cycle and make angular aware. 
    }
};

여기 바이올린이 있습니다.

또, 검색 드로어의 디렉티브를 작성하려고 하고 있었습니다(몇개의 수정이 필요:).여기 JSBin이 있어요.

ng클릭 직후 뷰에 $event.stopPropagation()을 추가할 것을 권장합니다.jQuery를 사용할 필요가 없습니다.

<button ng-click="toggleSearch();$event.stopPropagation();">toggle</button>

그런 다음 이 단순화된 js를 사용할 수 있습니다.

$scope.toggleSearch = function () {
    $window.onclick = null;
    $scope.menuOpen = !$scope.menuOpen;

    if ($scope.model.menuOpen) {
        $window.onclick = function (event) {
            $scope.menuOpen = false;
            $scope.$apply();
        };
    }
};

수락된 답변은 버튼을 클릭하여 드로어/팝업을 닫으면 오류가 발생하며, 버튼은 그 외부에 있습니다.$apply()두 번 실행됩니다.

이것은 단순화된 버전이기 때문에 전체를 호출할 필요가 없습니다.toggleSearch()다시 기능하여 이중화를 방지하다$apply().

$scope.toggleSearch = function() {

  $scope.open = !$scope.open;

  if ($scope.open) {
    $window.onclick = function(event) {
      var clickedElement = event.target;
      if (!clickedElement) return;

      var clickedOnSearchDrawer = elementClasses.contains('handle-right') || elementClasses.contains('drawer-right') || (clickedElement.parentElement !== null && clickedElement.parentElement.classList.contains('drawer-right'));

      if (!clickedOnSearchDrawer) {
        $scope.open = !$scope.open;
        $window.onclick = null;
        $scope.$apply();
      }
    }
  } else {
    $window.onclick = null;
  }
};

100% 만족하는 솔루션을 찾을 수 없었습니다.다음 방법을 사용했습니다.

<div class="options">
    <span ng-click="toggleAccountMenu($event)">{{ email }}</span>
    <div ng-show="accountMenu" class="accountMenu">
        <a ng-click="go('account')">Account</a>
        <a ng-click="go('logout')">Log Out</a>
    </div>
</div>

메뉴를 여는 데 ng-click이 있는 스팬이 사용되며, div.accountMenu가 열리거나 닫힙니다.

$scope.accountMenu = false;
$scope.toggleAccountMenu = function(e){
    if(e) e.stopPropagation();
    $scope.accountMenu = !$scope.accountMenu;
    if ($scope.accountMenu) {
        $window.onclick = function(e) {
            var target = $(e.target);
            if(!target) return;
            if(!target.hasClass('accountMenu') && !target.is($('.accountMenu').children())){
                $scope.toggleAccountMenu();
            }               
        };
    } else if (!e) {
        $window.onclick = null;
        $scope.$apply();
    }
}

이 방법에서는 하위 확인에 jQuery를 사용하지만 필요한 경우 필요 없이 수행할 수 있습니다.

이미 사이클에 들어가 있는 경우 $apply()를 호출하려고 하는 등 다른 사용자 버전에서 몇 가지 심각한 오류가 발생했습니다.내 버전은 전파를 방지하고 $apply()에 대한 안전 검사를 수행합니다.

언급URL : https://stackoverflow.com/questions/17706847/not-sure-how-to-hide-a-div-when-clicking-outside-of-the-div