这篇文章看起来像重复,但我认为不是。现在您可以点击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>
可以解释为什么这个脚本可以在Angular 1.0.2上运行,但是在较新的版本或者例如角1.2.23? –
@ V.R会检查出来。 –
@ V.R我已经在Angular 1.3x中检查过它,它可以工作。我已经为你制作了一个重磅炸弹:https://plnkr.co/edit/UX7eGy0DwmoS3FdXjrIv –