var app = angular.module('app', []);
app.controller('RedCtrl', function($scope) {
$scope.OpenRed = function() {
$scope.userRed = !$scope.userRed;
}
$scope.HideRed = function() {
$scope.userRed = false;
}
});
app.directive('hideRed', function($document) {
return {
restrict: 'A',
link: function(scope, elem, attr, ctrl) {
elem.bind('click', function(e) {
e.stopPropagation();
})
$document.bind('click', function() {
scope.$apply(attr.hideRed);
})
}
}
});
app.controller('BlueCtrl', function($scope) {
$scope.OpenBlue = function() {
$scope.userBlue = !$scope.userBlue;
};
$scope.HideBlue = function() {
$scope.userBlue = false;
};
});
app.directive('hideBlue', function($document) {
return {
restrict: 'A',
link: function(scope, elem, attr, ctrl) {
elem.bind('click', function(e) {
e.stopPropagation();
});
$document.bind('click', function() {
scope.$apply(attr.hideBlue);
})
}
}
});body {
position: relative;
display:flex;
}
a
{
margin-right:20px;
}
.loginBox
{
z-index: 10;
background: red;
width: 100px;
height: 80px;
position: absolute;
}
.fontSize
{
font-size: 30px;
}
.loginBoxBlue
{
z-index: 10;
background: blue;
width: 100px;
height: 80px;
position: absolute;
display:flex;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="app">
<body>
<div ng-controller="RedCtrl">
<a href="#" ng-click="OpenRed()" hide-red="HideRed()" ng-class="{'fontSize': userRed}">Show Red</a>
<div hide-red="HideRed()" class="loginBox" ng-show="userRed"></div>
</div>
<div ng-controller="BlueCtrl">
<a href="#" ng-click="OpenBlue()" hide-blue="HideBlue()" ng-class="{'fontSize': userBlue}">Show Blue</a>
<div hide-blue="HideBlue()" class="loginBoxBlue" ng-show="userBlue"></div>
</div>
</body>
</html>Hey there! By clicking on Show Red or Show Blue, you can show red and blue boxes respectively. These boxes can be closed by clicking outside of them or clicking on the text again. If both texts are clicked, both divs will be shown.
Now, the question is, how can we make it so that when you click on Show Red, the blue box is hidden and vice versa? Essentially, we want only one box to be visible at a time.