AngularJS：单击目标是否在元素内？没有jQuery

Question

I have a slideUp configuration area that should close when clicked outside of it, but of course not when clicked inside the element. 我有一个slideUp配置区域，当在其外部单击时应该关闭，但是在元素内部单击时当然不会关闭。 All the questions I could find here about that subject, was about hiding menus, in which case it doesn't really matter where the click target is. 我在这里可以找到的所有关于该主题的问题都是关于隐藏菜单的，在这种情况下，单击目标的位置并不重要。

After several hours I devised a working solution - available in this plunker - but I had to use jQuery to test if the click-target was indeed outside of the element. 几个小时后，我设计了一个可行的解决方案（可在此插件中使用），但是我不得不使用jQuery来测试点击目标是否确实在元素之外。

As I'm in the process of learning AngularJS I'd like to avoid using jQuery; 在学习AngularJS的过程中，我想避免使用jQuery。 I was told that was the best way to learn it ;) 有人告诉我那是学习它的最好方法；）

Is there a way to detect that? 有办法检测到吗？ I bet it's very obvious, but the most trivial things takes hours at the stage I'm currently on :D 我敢打赌这很明显，但是最琐碎的事情要花几个小时才能完成：D

Edit: The real issue here is detecting if the click is in- or outside of the element without "eating" any relevant events. 编辑：这里的真正问题是检测单击是在元素内部还是外部，而没有 “吃掉”任何相关事件。

Answer 1

The "Angular way" would be to put in a directive, here's a simple working example of a generic directive that can hide/show contents and use the body to hide as well. “角度方式”将放在指令中，这是通用指令的一个简单工作示例，该通用指令可以隐藏/显示内容，也可以使用主体来隐藏。

http://jsbin.com/wanupero/1/edit http://jsbin.com/wanupero/1/edit

It doesn't need jQuery (uses jqLite that is bundled with Angular). 它不需要jQuery（使用与Angular捆绑在一起的jqLite）。

Edit: here's a version that demonstrates the directive does not swallow all clicks... http://jsbin.com/wanupero/4/edit 编辑：这是一个演示指令不会吞下所有点击的版本... http://jsbin.com/wanupero/4/edit

Answer 2

HTML/CSS Solution HTML / CSS解决方案

How about creating a layer over the whole page with an ng-click to hide the slideUp and then you can safely add your slideUp element on top of that layer? 如何通过ng-click在整个页面上创建一个图层以隐藏slideUp，然后可以安全地将slideUp元素添加到该图层的顶部？

HTML HTML

  <body ng-controller="MainCtrl">
    <div class="mask" ng-click="toggleSlideUp()"></div>
    <div class="slide-up" ng-show="slideUp.show"></div>
  </body>

JS JS

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.slideUp = {show:true};
  $scope.toggleSlideUp = function() {
    $scope.slideUp.show = !$scope.slideUp.show;
  };
});

CSS CSS

.mask {
  position:absolute;
  z-index:1;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

.slide-up {
  width:200px;
  height:200px;
  background-color:blue;
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-100px;
  margin-top:-100px;
  z-index:2;
}

the slideUp has z-index of 2 so toggleSlideUp will not be triggered if you click it. slideUp的z索引为2，因此如果单击它，将不会触发toggleSlideUp。

plunkr: http://plnkr.co/edit/Mg4awi23z6AYrXyCdihH plunkr： http ://plnkr.co/edit/Mg4awi23z6AYrXyCdihH

Alternatively 另外

You can use angular.element.bind(document, function(event){ ... }); 您可以使用angular.element.bind(document, function(event){ ... }); The event object passed to the callback has a target property you can use compare with the slideUp element. 传递给回调的event对象具有target属性，您可以将其与slideUp元素进行比较。

So in your controller you could have 因此，在您的控制器中，您可能拥有

angular.element(document).bind(document, function(event){
    if(event.target !== slideUpElement) {
        hideSlideUpElement
    }
}):

AngularJS：单击目标是否在元素内？没有jQuery

问题描述

2 个解决方案

解决方案1
2 已采纳 2014-04-04 06:06:54

解决方案2
0 2014-04-04 17:19:46

HTML/CSS Solution HTML / CSS解决方案

Alternatively 另外

AngularJS：单击目标是否在元素内？ 没有jQuery

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-04-04 06:06:54

解决方案2 0 2014-04-04 17:19:46

HTML/CSS Solution HTML / CSS解决方案

Alternatively 另外

AngularJS：单击目标是否在元素内？没有jQuery

解决方案1
2 已采纳 2014-04-04 06:06:54

解决方案2
0 2014-04-04 17:19:46