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>

嘿，在此脚本中，您可以点击Show Red和Show Blue并显示红色和蓝色框。您可以关闭这些框在外面单击或再次单击文本。如果单击两个文本，将显示两个div。

问题：如果我点击Show Red蓝框隐藏，如果点击Show Blue红框隐藏，该怎么办？我想只有一个盒子可以显示。

Answer 1

我只是想知道你为什么要实现两个控制器？它只是复杂的简单应用程序。请改用RedCtrl，因此变量之间的通信没有问题。

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>

点击一个div关闭antoher div

1 个答案: