如何在点击浏览器窗口的任何地方时设置变量？

36 浏览
0 Comments

如何在点击浏览器窗口的任何地方时设置变量？

我在网站上有一个下拉菜单，它由ng-show控制。当用户单击按钮时，他们会看到下拉菜单。当他们再次单击时，下拉菜单就会隐藏：

Click Me
    You can see me now!

这个很好用。但是，如果用户单击窗口中不是具有\"class\"按钮\"的div的任何位置，我希望show被设置为false。我该如何实现？

admin 更改状态以发布 2023年5月23日
0

2 答案

0 Comments

HTML:

  
Click here to see dropdown

  
    
    
  • Item #1
    • 
    
  • Item #2
    • 
    
  • Item #3
    •

简单指令：

app.directive('customDropdown', ['$document', function($document) {
  return {
    restrict: 'A',
    link: function(scope, el) {
      // Switch dropdown visibility by clicking on 'target' element
      el.on('click', function(event) {
        event.preventDefault();
        scope.dropdownVisible = !scope.dropdownVisible;
      });
      // Hide dropdown if clicked somewhere 'outside'
      $document.on('click', function(event) {
        scope.dropdownVisible = false;
        return $document.off('click', event);
      });
    }
  };
}]);

0
0 Comments

快速/简单的方法

最快/最简单的方法是将你的取消代码(ng-click="show=false")放到body元素上，然后在现有的ng-click中添加$event.stopPropagation()。这样，每次点击该按钮时，由于阻止了点击事件向上冒泡，取消代码不会被执行。但是，点击其他任何地方都会触发body上的ng-click，所以取消代码将会运行。这里有一个这样做的示例。

更“Angular”的方法

我认为一种略微“更好”或“更‘Angular’”的方法来实现相同的结果是创建一个新的click-off指令，可以与ng-click一起使用。这个新指令可以（a）在目标元素上注册另一个点击处理程序，它将阻止冒泡，以及（b）在body元素上注册一个点击处理程序，以执行你需要的任何取消代码。这是一个采用这种方法的示例。

0