Question

任务

我想要一个在单击元素外部时调用函数的指令。用于打开菜单的用例，点击其外部时点击和关闭。

问题

该指令将onlick绑定到窗口以ckeck元素外部的点击，但是onclick函数获取最后一个范围，而不是＆＃34; right＆＃34;范围

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);
            }
        });
    }
};
}])

Answer 1

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

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

Answer 2

也许最好不要通过指令的链接功能来监听指令外的点击。我建议您为页面上的点击添加一个全局侦听器，该点击广播所点击的元素的名称（根据您喜欢的任何内容），并使指令监听这些事件的范围。$ on（＆＃39; name-of -event＆＃39）;

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

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

AngularJS指令范围被覆盖

任务

问题

Plunkr

简化指令：

2 个答案: