Click in one div close antoher div

Question

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, In this script you can click on Show Red and Show Blue and show red and blue boxes. You can close these boxes click in outside or click again on text. If you click in both text two divs will show.

Question: How do that if I click in Show Red blue box hide and if I click Show Blue red box hide. I would like that only one box could show.

score 2 · Accepted Answer · answered Feb 28 '17 at 11:13

I just wonder why did you implement two controllers? It just complicated your simple app. Use one RedCtrl instead, so there's no problem with communication between variables.

var app = angular.module('app', []);

app.controller('RedCtrl', function($scope) {
  $scope.OpenRed = function() {
    $scope.userRed = !$scope.userRed;
    $scope.userBlue = false;
  }
  $scope.HideRed = function() {
    $scope.userRed = false;
  }
  $scope.OpenBlue = function() {
    $scope.userBlue = !$scope.userBlue;
    $scope.userRed = false;
  };
  $scope.HideBlue = function() {
    $scope.userBlue = 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.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 ng-controller="RedCtrl">
  <div>
    <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>
    <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>

Thanks again :) because I thought if have long HTML code better is divide body on smaller controllers than use one controller in body. Maybe I am wrong :) — Mat.Now, Feb 28 '17 at 11:20
But in Angular in possible to comunicate between controllers at all? — Mat.Now, Feb 28 '17 at 11:29
@V.R It is, but may be a little bit difficult for someone who begins his adventure with angularjs. http://stackoverflow.com/questions/11252780/whats-the-correct-way-to-communicate-between-controllers-in-angularjs — kind user, Feb 28 '17 at 11:30
I try do something more advanced i.e. register and login panel with direct to home page and everything worked good until to moment when I added this script in external file. Now display error "RedCtrl" is not registered. I know you can not understand me hihi but maybe you know this problem — Mat.Now, Feb 28 '17 at 14:07
@V.R Would be much better if you would make a new brand question, because I have to see your problem :) Also other users will like to help you too. — kind user, Feb 28 '17 at 14:10

Click in one div close antoher div

1 Answers1