单击一个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红色框隐藏，该怎么办。我希望只有一个盒子可以显示。

来源

2017-02-28 Mat.Now

我只是想知道你为什么实现两个控制器？它只是复杂你的简单应用程序。代之以使用一个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>

来源

2017-02-28 11:13:05

再次感谢:)因为我想如果有大的HTML代码更好的是在较小的控制器分体比身体使用一个控制器。也许我错了:) –

@ V.R它不是真的很长的代码，hihi :) –

hehe是的，这段代码不是:)我期待hihi :) –

单击一个DIV关闭antoher格

回答

相关问题