ng-show set как 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 логическое значение устанавливается как ложное в контроллере:

$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 
     }] 

почему-то появляется, что нг-шоу правильно установлен в ложным, но элемент появляется в любом случае. Если я привяжу кнопку к visible булевым, но и измените его, пока я нахожусь в браузере, элемент появляется и исчезает правильно.

Answer 1

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

Выключает ng-show не работает должным образом, если первоначально установлено как ложное и используется внутри тега uib-accordion. То, что я сделал для решения проблемы, - это обернуть аккордеон в div и использовать ng-show на THAT 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> 

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

Answer 2

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

Answer 3

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

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

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

Answer 4

Вы используете как 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>