angular + bootstrap在保留布局的同时显示和隐藏
angular + bootstrap在保留布局的同时显示和隐藏
提问于 2014-12-21 11:28:42
有没有一种好的方法可以添加和删除元素，而不会重排页面并导致所有元素抖动？
angular指令ng-show和ng-hide不保留布局。
而bootstrap类也不需要
<div class="show">...</div>
<div class="hidden">...</div>有没有一种好的方法可以添加和删除元素，而不会重排页面并导致所有元素抖动？
回答 3
Stack Overflow用户
发布于 2014-12-21 12:39:15
ng-hide和ng-show使用display:none
您需要在visibility : hidden的CSS中添加新属性。
.element-hidden{
visibility: hidden;
}然后将条件提供给ng指令- ng-class
例如：
ng-class="{element-hidden : hideBox == true}" 其中hideBox == true是您要检查的条件。
Stack Overflow用户
发布于 2014-12-21 13:09:04
您正在寻找CSS visibility属性，该属性使项目不可见，但仍然允许元素占用DOM上的空间。没有内置的Angular指令可以做到这一点，所以你需要使用自己的指令。
myApp.directive("visiblityOn", function(){
return{
restrict: "A",
link: function(scope, element){
scope.$watch('visibilityFlag', function(){
element[0].style.visibility = scope.visibilityFlag ? "visible" : "hidden";
});
}
}
});和一个与您的指令一起工作的相应控制器：
myApp.controller("myController", function($scope){
$scope.visibilityFlag = true;
$scope.changeVisibility = function(){
$scope.visibilityFlag = !$scope.visibilityFlag;
};
});Example
Stack Overflow用户
发布于 2014-12-21 12:47:44
@RahulPatil的答案是正确的，但有点不优雅。我建议继续使用ng-show/ng-hide，因为它更简单，可读性更好(例如，继续使用相同的模式)，并在CSS中为您的特定项目添加覆盖：
.keepInFlow.ng-hide {
dislpay: block!important;
visibility: hidden;
}
<div class="keepInFlow" ng-show="show">..</div>Angular的documentation也提到了覆盖ng-hide
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27586480
复制相关文章
相似问题
腾讯云开发者
