ng-show, установленный как false, не скрывает элемент при загрузке страницы

Question

У меня есть этот фрагмент кода, использующий Angular 1.3, и я хочу, чтобы div с директивой ng-show НЕ отображался при первой загрузке страницы:

       <div class="stuff">
            <uib-accordion close-others="false">
                <div ng-show="element.visible" ng-repeat="element in elements" ng-if="element.active" uib-accordion-group ng-class="element.open? 'colorBackgroundBlue':'black'" class="panel-default yellow" is-open="element.open">
                    <uib-accordion-heading>
                        {{element.title}} ({{element.number}}) 
                    </uib-accordion-heading>
                    <div class="scrollable-accordion" ng-if="element.numberOfElements!=0">
                    </div>
                </div>
            </uib-accordion>                
        </div>

element.visible логическое значение установлено в false в контроллере:

$scope.elements = [{
            status: 0,       
            title: blabla,
            number: 0,
            open: false,
            active: false,         
            visible: false
        }, {
            status: 1,     
            title: blob,        
            number: 0,
            open: false,
            active: false,         
            visible: false
        }]

По некоторым причинам кажется, что ng-show правильно установлено в false, но элемент все равно появляется. Если я свяжу кнопку с visible Логическое значение и изменить его, пока я в браузере, элемент отображается и исчезает правильно.

Answer 1

Для тех, кто сталкивается с той же проблемой, используя UIB-гармошку в угловых.

Оказывается, ng-show не работает должным образом, если изначально было установлено как false и использовалось внутри тега uib-accordion. Что я сделал, чтобы решить проблему, так это обернуть аккордеон в div и использовать вместо него ng-show для этого div. Как это:

         <div class="stuff">
            <div ng-show="element.visible" ng-repeat="element in elements" >
            <uib-accordion close-others="false">
                <div ng-if="element.active" uib-accordion-group ng-class="element.open? 'colorBackgroundBlue':'black'" class="panel-default yellow" is-open="element.open">
                    <uib-accordion-heading>
                        {{element.title}} ({{element.number}}) 
                    </uib-accordion-heading>
                    <div class="scrollable-accordion" ng-if="element.numberOfElements!=0">
                    </div>
                </div>
            </uib-accordion>
            </div>
        </div>

Осторожно: проблема возникала только при загрузке страницы и только с ng-show и ng-hide, тогда как ng-if, кажется, прекрасно работает внутри <uib-accordion>, Спасибо всем, кто пытался помочь в любом случае.

Answer 2

Вы используете как ng-if, так и ng-show. Попробуйте удалить кого-нибудь из этого. Оба предназначены для одной и той же цели.

А также используйте ng-cloak, который предотвращает кратковременное отображение HTML-шаблона AngularJS браузером в исходном (некомпилированном) виде во время загрузки приложения.

var app = angular.module("app", []);
app.controller("ctrl", function($scope) {
  $scope.elements = [{
    status: 0,
    title: 'blabla',
    number: 0,
    open: false,
    active: false,
    visible: false
  }, {
    status: 1,
    title: 'blob',
    number: 0,
    open: false,
    active: false,
    visible: false
  }];
  
  $scope.ShowHide = function(){
    angular.forEach($scope.elements, function(element){
      element.visible=!element.visible;
      element.active=!element.active;
      alert(element.visible);
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div class="stuff">
    <uib-accordion close-others="false">
      <div ng-cloak ng-show="element.visible" ng-repeat="element in elements" ng-if="element.active" uib-accordion-group ng-class="element.open? 'colorBackgroundBlue':'black'" class="panel-default yellow" is-open="element.open">
        <uib-accordion-heading>
          {{element.title}} ({{element.number}})
        </uib-accordion-heading>
        <div class="scrollable-accordion" ng-if="element.numberOfElements!=0">
        </div>
      </div>
    </uib-accordion>
    <button ng-click="ShowHide()">Make visible</button>
  </div>
</div>

Answer 3

Элемент виден при загрузке страницы, поскольку область действия еще не связана с директивой. нг-плащ может решить вашу проблему

Answer 4

Попробуй использовать ng-cloak

ngCloak Директива используется для предотвращения краткого отображения HTML-шаблона AngularJS браузером в его сыром (некомпилированном) виде во время загрузки вашего приложения.

<div id="template1" ng-cloak>{{ 'hello' }}</div>

Answer 5

Добавьте class="ng-hide" вместе с ng-cloak. <span class="bag-badge bag-melon ng-hide" ng-show="itemsincart>0" ng-cloak>{{itemsincart}}</span>

Это сработало для меня и позволило избежать мерцания элементов во время загрузки страницы.