单击一个DIV关闭antoher格
问题描述:
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
红色框隐藏,该怎么办。我希望只有一个盒子可以显示。
答
我只是想知道你为什么实现两个控制器?它只是复杂你的简单应用程序。代之以使用一个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>
再次感谢:)因为我想如果有大的HTML代码更好的是在较小的控制器分体比身体使用一个控制器。也许我错了:) –
@ V.R它不是真的很长的代码,hihi :) –
hehe是的,这段代码不是:)我期待hihi :) –