Как правильно переопределить класс .ng-hide, чтобы изменить скрытие / отображение характера?

Question

При использовании директив ng-hide или ng-show .ng-class добавляется или удаляется, поэтому элементы DOM видны или нет.

Однако они как бы "удаляются" позиционно, например, при скрытии или отображении двух непрерывных элементов div один поверх другого.

<div ng-show="condition1">First div</div>
<div ng-show="condition2">Second div</div>

Итак, если condition1 оценивается как ложное, первый div будет скрыт НО второй div займет позицию, которую занял только что скрытый div.

Как мне этого избежать? Я только хочу, чтобы элементы DOM были невидимыми, но не удалялись каким-либо образом удаляться .

Первое обходное решение.

Я попытался переопределить класс .ng-hide и получить дополнительный класс only-hide для элементов, для которых мне нужен этот эффект:

.ng-hide.only-hide {
  visibility: hidden !important;
}

Но результатов пока нет.

html css angularjs

4

diegoaguilar 6 Мар 2015 в 23:31

Answer 1

Чтобы сохранить и поддерживать пространство, занимаемое div, нельзя использовать напрямую ng-hide и ng-show.

Директиву ng-style можно использовать следующим образом:

<div ng-style="conditionHide1">First div</div>
<div ng-style="conditionHide2">Second div</div>

Тогда ваши conditionHide1 и conditionHide2 должны выглядеть как

if (condition1)
    $scope.conditionHide1= {'visibility': 'hidden'}; // then div1 will hidden.
else
    $scope.conditionHide1= {'visibility': 'visible'}; // then div1 will visible.
if (condition2)
    $scope.conditionHide2= {'visibility': 'hidden'}; // then div2 will hidden.
else
    $scope.conditionHide2= {'visibility': 'visible'}; // then div2 will visible.

Вы можете изменить видимость кнопки, изменив $scope.conditionHide1 и $scope.conditionHide2 в соответствии с вашими условиями.

Решение2 с помощью настраиваемой директивы:

Создайте новую директиву с именем condition относительно атрибута A . Настройте watch для отслеживания значения атрибута и, в зависимости от значения, установите элемент (в данном случае {{X1} }) соответствующий стиль css. Значение отображается в переменную showDiv, которая меняет свое значение, нажимая кнопку. При нажатии на кнопку значение showDiv становится противоположным !showDiv, и часы меняют видимость с visible на hidden и наоборот.

angular.module('MyModule', [])

.directive('condition', function() {

  return {
    restrict: 'A',
    
    link: function(scope, element, attributes) {
    	scope.$watch(attributes.condition, function(value){
    	  element.css('visibility', value ? 'visible' : 'hidden');
        });
    }
  };
})

.controller('MyController', function($scope) {
  $scope.showDiv = true;
});

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='MyModule' ng-controller='MyController'>
  <div condition='showDiv'>Div visible/invisible</div>
  <button ng-click='showDiv = !showDiv'>Hide div or show it</button>
</div>

1

StarsSky 6 Мар 2015 в 21:57

Answer 2

Я добился этого с помощью этого подхода второго класса, установив:

.ng-hide.only-hide {

  visibility: hidden !important;
  display: block !important;
}

Поскольку Angular устанавливает .ng-hide с display:none, я делаю его невидимым, но присутствующим настройкой display:block.

2

diegoaguilar 6 Мар 2015 в 20:51

Как правильно переопределить класс .ng-hide, чтобы изменить скрытие / отображение характера?

Первое обходное решение.

2 ответа

Похожие вопросы

Новые вопросы

html