AngularJS指令范围被覆盖答案

【问题标题】：AngularJS Directive scope gets overwritenAngularJS指令范围被覆盖
【发布时间】：2014-03-24 05:39:04
【问题描述】：

任务

我想要一个在元素外部单击时调用函数的指令。用例是在单击时打开菜单并在单击菜单外部时关闭。

问题

该指令将 onlick 绑定到窗口以检查元素外部的点击，但 onclick 函数获取最后一个范围，而不是“正确”范围

Plunkr

http://plnkr.co/edit/ePKMMsbe9HYikY9XQ1u3?p=preview

简化指令：

app.directive('clickanywherebuthere', ['$document', '$timeout', function($document, $timeout) {
return {
    link: function postLink(scope, element, attrs) {
        onClick = function(event) {
            var isChild = element.has(event.target).length > 0;
            var isSelf = element[0] == event.target;
            var isInside = isChild || isSelf;
            if (!isInside)
                scope.$apply(attrs.clickanywherebuthere)
        }

        scope.$watch(attrs.isActive, function(newValue, oldValue) {
            if (newValue !== oldValue && newValue == true) {
                $timeout(function() { $document.bind('click', onClick) })
            }
            else if (newValue !== oldValue && newValue == false) {
                $document.unbind('click', onClick);
            }
        });
    }
};
}])

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

问题是 onClick 仅在您的指令第一次被调用时创建，并且它绑定到第一个按钮的范围。您需要在“onClick”前面添加“var”才能使其正常工作。我在下面修改了你的 plnkr：

http://plnkr.co/edit/0TrIM6d1Y6mneYgMcCjN?p=preview

【讨论】：

【解决方案2】：

也许最好不要通过指令的链接功能来监听指令之外的点击。我建议你为页面上的点击添加一个全局监听器，广播被点击的元素的名称（无论你喜欢什么），并让指令用 scope.$on('name-of-event' 监听这些事件);

在应用程序的运行阶段，添加点击监听器来广播被点击元素的值

angular.module('test').run(function($rootScope){
  $(document).click(function(event){
    $rootScope.$broadcast('clickanywhere',event.target.nodeName)  
    })
  })

【讨论】：