單擊一個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格

回答

相關問題