打开/关闭div切换和点击外部div
这篇文章看起来像重复，但我认为不是。现在您可以点击Show box并显示红色框，如果您想关闭此框，请点击外部。打开/关闭div切换和点击外部div
问题：如何再次单击这个红框Show box除了点击外部的文字。以及如何在点击后更改CSS样式点击后改变字体大小Show box
var myApplication = angular.module('myApp', []);
myApplication.directive('hideLogin', function($document){
return {
restrict: 'A',
link: function(scope, elem, attr, ctrl) {
elem.bind('click', function(e) {
\t e.stopPropagation();
\t });
$document.bind('click', function() {
scope.$apply(attr.hideLogin);
})
}
}
});
myApplication.controller('hideContainer',function ($scope){
$scope.openLogin = function(){
$scope.userLogin = true;
\t };
$scope.hideLoginContainer = function(){
$scope.userLogin = false;
\t };
});body {
position:relative;
}
.loginBox {
z-index:10;
background:red;
width:100px;
height:80px;
padding:10px;
position:absolute;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<body ng-app="myApp" ng-controller="hideContainer">
<a href="#" ng-click="openLogin()" hide-login="hideLoginContainer()">Show box</a>
<div hide-login="hideLoginContainer()" class="loginBox" ng-show="userLogin" style="display:none;">
</div>
</body>
为了能够隐藏点击框就可以了，使用$scope.userLogin = !$scope.userLogin条件。
要改变它的css风格，例如font-size，使用ng-class。如果userLogin变量为true，则会将fontSize类添加到其中，将其更改为font-size。
var myApplication = angular.module('myApp', []);
myApplication.directive('hideLogin', 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.hideLogin);
})
}
}
});
myApplication.controller('hideContainer', function($scope) {
$scope.openLogin = function() {
$scope.userLogin = !$scope.userLogin;
};
$scope.hideLoginContainer = function() {
$scope.userLogin = false;
};
});body {
position: relative;
}
.loginBox {
z-index: 10;
background: red;
width: 100px;
height: 80px;
padding: 10px;
position: absolute;
}
.fontSize {
font-size: 30px;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<body ng-app="myApp" ng-controller="hideContainer">
<a href="#" ng-click="openLogin()" hide-login="hideLoginContainer()" ng-class="{'fontSize': userLogin}">Show box</a>
<div hide-login="hideLoginContainer()" class="loginBox" ng-show="userLogin" style="display:none;">
</div>
</body>
你可以重命名openLogin()到toggleLogin()，并相应地改变功能
$scope.toggleLogin = function(){
$scope.userLogin != $scope.userLogin;
};
这将切换箱，当你点击链接。
对于CSS部分，使用ng-class到conditionaly签订类的元素，如果userLogin ==true
<div ng-class="{'myConditionalClass':userLogin }"></div>
，而不是使用多个$scope为实现这样的事情，你可以使用一个$scope变量，需要看代码片段。
var myApplication = angular.module('myApp', []);
myApplication.directive('hideLogin', function($document){
return {
restrict: 'A',
link: function(scope, elem, attr, ctrl) {
elem.bind('click', function(e) {
\t e.stopPropagation();
\t });
$document.bind('click', function() {
scope.$apply(attr.hideLogin);
})
}
}
});
myApplication.controller('hideContainer',function ($scope){
$scope.userLogin = true;
$scope.hideLoginContainer = function(){
$scope.userLogin = true;
\t };
});body
{
position:relative;
}
.loginBox
{
z-index:10;
background:red;
width:100px;
height:80px;
padding:10px;
position:absolute;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<body ng-app="myApp" ng-controller="hideContainer">
<a href="#" ng-click="userLogin = !userLogin" hide-login="hideLoginContainer()">Show box</a>
<div hide-login="hideLoginContainer()" class="loginBox" ng-show="!userLogin" style="display:none;">
</div>
</body>我觉得OP想也不断地点击以外的任何地方，当躲藏在箱子的功能。 – Nope
@Fran ahhhh，我错过了 –
可以解释为什么这个脚本可以在Angular 1.0.2上运行，但是在较新的版本或者例如角1.2.23？ –
@ V.R会检查出来。 –
@ V.R我已经在Angular 1.3x中检查过它，它可以工作。我已经为你制作了一个重磅炸弹：https://plnkr.co/edit/UX7eGy0DwmoS3FdXjrIv –