CODEWITHSUNDEEP
javascriptangularjs
Mat.Now
Mat.Now

Reputation: 1725

Click in one div close antoher div

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.

Upvotes: 0

Views: 66

Answers (1)

kind user
kind user

Reputation: 41893

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>

Upvotes: 2

Related Questions