javascript - AngularJS 中最近的父选择器

Question

我有一个使用 jQuery 关闭自定义弹出窗口的工作代码，但我想要一个使用 AngularJS 而不是 jQuery 的解决方案。任何人都可以帮助我在 AngularJS 中找到 this.closest()。

我想在点击 .popClose 时使用 AngularJS 隐藏 .popOverlay，而不是 jQuery。而且我不想使用特定的类/id，因为我有很多这样的弹出窗口，我想为所有这些弹出窗口提供一个通用的解决方案。

这是我的工作 jQuery 代码:

function popClose(e)
{
	$(e).closest('.popOverlay').fadeOut('slow');
}

.popOverlay { background:rgba(0,0,0,.5); width:100%; height:100%; overflow-y:auto; position:fixed; left:0; top:0;}
.popBox { background:#fff; border-radius:5px; position:relative; width:400px; max-width:90%; padding:20px; margin-left:auto; margin-right:auto; margin-top:50px;}
.popClose { display:inline-block; position:absolute; top:5px; right:10px; cursor:pointer; color:#f00; font:bold 16px Arial, Helvetica, sans-serif;}
.heading { color:#0077c8; font:bold 16px Arial, Helvetica, sans-serif; margin-top:0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popOverlay">
	<div class="popBox">
		<a class="popClose" onClick="popClose(this)">x</a>
		<h3 class="blue-heading">This is a custom popup.</h3>
	</div>
</div>

Answer 1

为了达到预期的结果，在带有 class-popOverlay 的 div 上使用 ng-hide，并在单击 x 时将其设置为 true

HTML:

<div ng-app="myApp" ng-controller="myCtrl">
  <div class="popOverlay" ng-hide="closePop">
    <div class="popBox">
      <a class="popClose" ng-click="popClose()">x</a>
      <h3 class="blue-heading">This is a custom popup</h3>
    </div>
  </div>
</div>

JS:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.popClose= function(){
    $scope.closePop= true;
    };
});

http://codepen.io/nagasai/pen/XKgEbE