Question

有没有一种很好的方法来添加和删除元素而不重排页面并导致所有元素抖动？

角度指令ng-show和ng-hide不会保留布局。

和bootstrap类都没有

<div class="show">...</div>
<div class="hidden">...</div>

有没有一种很好的方法来添加和删除元素而不重排页面并导致所有元素抖动？

Answer 1

ng-hide和ng-show使用display:none

您需要在CSS中为visibility : hidden

添加新属性

 .element-hidden{
     visibility: hidden;
  }

然后为ng指令提供条件 - ng-class

e.g。

ng-class="{element-hidden : hideBox == true}"

其中hideBox == true是您要检查的条件..

Answer 2

您正在寻找使项目不可见的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

Answer 3

@ 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

角度+引导程序显示和隐藏，同时保留布局

3 个答案: