打開/關閉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>

來源

2017-02-27 Mat.Now

爲了能夠隱藏點擊框就可以了，使用$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>

來源

2017-02-27 09:55:10

可以解釋爲什麼這個腳本可以在Angular 1.0.2上運行，但是在較新的版本或者例如角1.2.23？ –

@ V.R會檢查出來。 –

@ V.R我已經在Angular 1.3x中檢查過它，它可以工作。我已經爲你製作了一個重磅炸彈：https://plnkr.co/edit/UX7eGy0DwmoS3FdXjrIv –

你可以重命名openLogin()到toggleLogin()，並相應地改變功能

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

這將切換箱，當你點擊鏈接。

對於CSS部分，使用ng-class到conditionaly簽訂類的元素，如果userLogin ==true

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

來源

2017-02-27 09:51:03

，而不是使用多個$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>

來源

2017-02-27 09:52:43

我覺得OP想也不斷地點擊以外的任何地方，當躲藏在箱子的功能。 – Nope

@Fran ahhhh，我錯過了 –

打開/關閉div切換和點擊外部div

回答

相關問題