AngularJS中最接近的父选择器

Question

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

我想隐藏.popOverlay点击使用AngularJS的.popClose，而不是jQuery。我不想使用perticular class/id becoz我有很多像这样的弹出窗口，我想为它们提供一个通用的解决方案。

这是我工作的jQuery代码：

function popClose(e) 
 
{ 
 
\t $(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"> 
 
\t <div class="popBox"> 
 
\t \t <a class="popClose" onClick="popClose(this)">x</a> 
 
\t \t <h3 class="blue-heading">This is a custom popup.</h3> 
 
\t </div> 
 
</div>

Answer 1

为了达到预期的效果，使用NG隐藏与类popOverlay DIV，并将其设置为true x的点击

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

Answer 2

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


function popClose(status) 
{ 
    if(status=="true"){ 
$scope.popclose=true; 
} 
} 

尝试。它为我工作

Answer 3

您可以使用“引导模态”，而不是。

访问http://getbootstrap.com/javascript/#modals