각도 토글 사용자 지정 드롭 다운

Question

사용자 지정 드롭 다운 선택기가 있습니다. 브라우저의 아무 곳이나 클릭하면 드롭 다운을 토글하고 싶습니다. toggleModules()이 드롭 다운 내에서 작동합니다.

데이터 : modules=["A", "B", "C", "D", "E", "F"]

<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12"> 
    <div class="vov-filters ov-filter-region"> 
     <span ng-click="toggleModules($event)"><label>Module</label> 
      <b id="caret-glyph" class="glyphicon glyphicon-chevron-down pull-right" area-hidden="true"></b> 
     </span> 

     <div id="el1" class="overlay bordered" ng-if="showModules"> 
      <span role="button" ng-click="clearSelectedModules()" class="clear">Clear</span> 
       <div class="filter-checkbox" ng-repeat="entry in modules" ng-click="moduleFilter(entry)"> 
        <label> 
         <input ng-show="entry.show" type="checkbox" ng-model="entry.show"> 
         <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span> 
         {{entry.name}} 
        </label> 
       </div> 
      </div> 

     </div> 
    </div> 

컨트롤러 : FN 전환 -

$scope.toggleModules = function(ev) { 
     ev.preventDefault(); 
     ev.stopPropagation(); 
     $scope.showModules = !$scope.showModules; 
     if ($scope.showModules) { 
     $scope.overlay = true; 
     } else { 
     $scope.overlay = false; 
     } 
    }; 

같은 콘트롤 : $ 문서를 클릭 이벤트 : 당신은 N을 만들 수 있습니다

$document.on('click', function(event) { 
    <!-- Start Toggle Module filter --> 
    $scope.toggleModules(event) 
    <!-- End Toggle Module filter --> 
    return $document.off('click', event); 
}); 

Answer 1

고마워 원하는대로 할. 나에게 잘 작동하는 해결책이있다.

$document.on('click', function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    $scope.$apply(function() { 
     $scope.showModules = false; 
    }); 
    $document.off('click', event); 
}); 

Answer 2

EW 사업부 외부 클릭을 확인할 수 있습니다 지시어를 오프 클릭 한 다음

myApp.directive('clickOff', function($parse, $document) { 
var dir = { 
    compile: function($element, attr) { 
     // Parse the expression to be executed 
     // whenever someone clicks _off_ this element. 
     var fn = $parse(attr["clickOff"]); 
     return function(scope, element, attr) { 
     // add a click handler to the element that 
     // stops the event propagation. 
     element.bind("click", function(event) { 
      console.log("stopProp"); 
      event.stopPropagation(); 
     }); 
     angular.element($document[0].body).bind("click",                 function(event) { 
      console.log("cancel."); 
      scope.$apply(function() { 
       fn(scope, {$event:event}); 
      }); 
     }); 
     }; 
    } 
    }; 
    return dir; 
}); 

Here's a fiddle