Question

这篇文章看似重复，但我认为不是。现在，您可以单击Show box并显示红色框，如果要关闭此框，请单击“外部”。

问题：除了点击外部之外，再次点击此红色框的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) {
     	e.stopPropagation();
   	});
    $document.bind('click', function() {
        scope.$apply(attr.hideLogin);
     })
    }
  }
});

myApplication.controller('hideContainer',function ($scope){
    $scope.openLogin = function(){
        $scope.userLogin = true;
  	};
     $scope.hideLoginContainer = function(){
        $scope.userLogin = false;
  	};
 });

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>

Answer 1

而不是使用多个$scope来实现此类内容，您可以使用单个$scope变量，请查看代码段。

＆＃13;

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.userLogin = true;
     $scope.hideLoginContainer = function(){
        $scope.userLogin = true;
  	 };
 });

＆＃13;

body
{
position:relative;
}
.loginBox
{
z-index:10; 
background:red; 
width:100px; 
height:80px; 
padding:10px; 
position:absolute;
}

＆＃13;

<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>

＆＃13;

Answer 2

为了能够在点击它时隐藏框，请使用$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>

Answer 3

您可以将openLogin()重命名为toggleLogin()并相应地将功能更改为

 $scope.toggleLogin = function(){
        $scope.userLogin != $scope.userLogin;
    };

当您点击链接时，将切换此框。

对于CSS部分，如果ng-class

，请使用userLogin ==true条件性地将类签名到元素

<div ng-class="{'myConditionalClass':userLogin }"></div>

打开/关闭div切换并单击div外部

3 个答案: