Question

我有一个slideUp配置区域，在其外部单击时应关闭，但当然在单击元素内部时不会。我在这里可以找到关于该主题的所有问题都是关于隐藏菜单，在这种情况下，点击目标的位置并不重要。

几个小时后，我设计了一个工作解决方案 - 可在this plunker中使用 - 但我必须使用jQuery来测试点击目标是否确实在元素之外。

因为我正在学习AngularJS，所以我想避免使用jQuery;我被告知这是学习它的最好方法;）

有没有办法检测到它？我敢打赌，这是非常明显的，但是我目前所处的阶段最微不足道的事情需要几个小时：D

编辑：这里真正的问题是检测点击是否在元素之内或之外，没有“吃掉”任何相关事件。

Answer 1

“Angular方式”将是一个指令，这里是一个通用指令的简单工作示例，它可以隐藏/显示内容并使用正文隐藏。

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

它不需要jQuery（使用与Angular捆绑在一起的jqLite）。

编辑：这是一个演示该指令不会吞下所有点击的版本...... http://jsbin.com/wanupero/4/edit

Answer 2

HTML / CSS解决方案

如何使用ng-click创建整个页面上的图层以隐藏slideUp，然后您可以安全地在该图层的顶部添加slideUp元素？

HTML

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

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

.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;
}

slideUp的z-index为2，因此如果单击它，将不会触发toggleSlideUp。

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

替代地

您可以使用angular.element.bind(document, function(event){ ... });传递给回调的event对象具有target属性，您可以将其与slideUp元素进行比较。

所以在你的控制器中你可以拥有

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

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

2 个答案:

HTML / CSS解决方案

替代地