AngularJS学习笔记之directive模拟实现div的onblur事件

下面的文章是本人翻译，原文地址：

http://vadimpopa.com/onblur-like-for-a-div-in-angularjs-to-close-a-popup/

在Angular中利用onblur来关闭一个类似DIV的弹出层

 我们经常遇到一种情况：当用户点击弹出层以外的任何地方时关闭弹出层。有很多其他方案来实现这一功能——其中包括最简单的就是给DIV加上tabindex属性并且利用onblur事件。

但是onblur并不适合我的情况，因为onblur事件只有当弹出层得到焦点之后才能触发。用户可能希望能够在弹出层没有获得焦点的情况下关闭。

 

· HTML

<div tabindex='-1' onblur='closeMyPopup()'></div>

· AngularJS

<div class='popup' tabindex='-1' data-ng-show='form.popups.myPopup' data-ui-event="{blur:'closeMyPopup()'}"></div>

于是我写了一个非常简单的AngularJS directive，当有DOM click事件触发并且click的target不是弹出层的子节点的时候这个这个directive会计算scope中表达式的值：

app.directive('outsideClick', ['$document', '$parse', function($document, $parse){
    return {
        link: function($scope, $element, $attributes){
            var scopeExpression = $attributes.outsideClick,
                 onDocumentClick = function(event){
                     var isChild = $element.find(event.target).lenght>0;//这行代码有错
                     
                     if(!isChild){
                         $scope.$apply(scopeExpression);
                     }
                 };
            $document.on('click', onDocumentClick);

            $element.on('$destroy', function(){
                $document.off('click', onDocumentClick);
            });
        }
    }
}]);

使用起来也很容易：

<div class='popup' data-ng-show='form.popups.myPopup' outside-click='closeMyPopup()'></div>

上面那行有错的代码问题在于此时的evt.target是属于js原生的dom原生，而$element则是Angular内嵌的JQLite获取到的元素，一个是js对象，一个是jq对象，所以查找不到。可以把那段去掉自己写一个判断是否是父子节点的方法，很简单，这里就不赘述了。

 

英文水平有限，如有不正确的地方，欢迎指正