[AngularJS] div 태그에 focusout 또는 blur 이벤트 주기

AngularJS를 사용하다 보면 input 태그가 아닌 div 혹은 어떤 영역의 바깥영역을 사용자가 클릭했을 때 이벤트를 주고 싶을 때가 있어요. 처음에는 자료가 안나와서 deep-blur라는 angularjs 모듈을 사용하다가 모듈이 내 마음대로 되지도 않고 조금 불안정한 느낌이 들어서 모듈을 제거하고 디렉티브로 구현된 방법이 있어서 바로 적용했습니다. deep-blur라는 모듈을  사용하는 것보다 훨씬 안정적이고 내 마음대로 로직을 수정할 수 있어서 훨씬 좋은 방법이라고 생각합니다.

 

 

---

 

소스 (Source)

app.directive("outsideClick", ['$document','$parse', function( $document, $parse ){
    return {
        link: function( $scope, $element, $attributes ){
            var scopeExpression = $attributes.outsideClick
            var onDocumentClick = function(event){
                var isChild = $element.find(event.target).length > 0;
 
                if(!isChild) {
                    $scope.$apply(scopeExpression);
                }
            };
 
            $document.on("click", onDocumentClick);
 
            $element.on('$destroy', function() {
                $document.off("click", onDocumentClick);
            });
        }
    }
}]);

 

View 영역에서 사용방법은 아래와 같습니다.

 

<div class="layer" ng-show="show_layer" outside-click="closeMyLayer()"></div>

 

기본적인 방법은 이렇습니다. outside-click을 뷰영역에서 속성으로 설정할 때 값을 처리할 $scope함수를 지정하면 됩니다.