单击一个div关闭另一个div
[英]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>
嘿，在此脚本中，您可以单击“ Show Red和“ Show Blue然后显示红色和蓝色框。 您可以关闭这些框，在外部单击或再次单击文本。 如果单击两个文本，将显示两个div。
问题：如果我单击“ Show Red蓝色框隐藏，并且单击“ Show Blue红色”框隐藏，该怎么办。 我希望只能显示一个方框。
1 个解决方案
解决方案1
2 已采纳 2017-02-28 11:13:05
我只是想知道为什么要实现两个控制器？ 它只是使您的简单应用变得复杂。 使用一个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 /单击打开Div，它将关闭
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.