AngularJSで最も近い親セレクタ

Question

jQueryを使用してカスタムポップアップを閉じるコードがありますが、jQueryの代わりにAngularJSを使用するソリューションが必要です。 誰でもAngularJSのthis.closest()を見つけるのを助けることができます。

.popCloseのクリックで.popOverlayを非表示にするには、jQueryではなくAngularJSを使用します。そして、私はperticular class/id becozを使用したくないです。私はこのようなポップアップをたくさん持っています。私はすべての共通ソリューションを求めています。

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

クラスpopOverlay付きのdivの期待結果、利用NG非表示を達成し、X

のクリック時にtrueに設定するには、HTML：ここ

は私の作業jQueryのコードです：

<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