Nearest parent selector in AngularJS

Question

I have working code to close a custom popup using jQuery, but I want to use a solution using AngularJS instead of jQuery. Anyone can help me find this.closest()in AngularJS.

I want to hide .popOverlayon click .popCloseusing AngularJS, not jQuery. And I do not want to use perticular class / id becoz. I have many such pop-ups, I want their common solution to be available.

Here is my jQuery working code:

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>

Run codeHide result

Answer 1

To achieve the expected result, use ng-hide for the div with the class-popOverlay and set to true when you click 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

you can use bootstrap modal instead.

visit http://getbootstrap.com/javascript/#modals