ng-show設置爲false在頁面加載時不隱藏元素

Question

我有這段代碼，使用Angular 1.3，我希望帶有ng-show指令的div在我首先加載頁面時不顯示：

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

對於它看來，NG-顯示正確設置爲false，但無論如何元素就可以看出一些原因。如果我將一個按鈕綁定到visible布爾值，並在瀏覽器中更改它，則該元素將正確顯示並消失。

Answer 1

對於任何人誰使用UIB-手風琴的角度同樣的問題絆倒。

如果最初設置爲false並在uib-accordion標記內使用，則會發現ng-show無法正常工作。我所做的解決問題的方法是將手風琴包裝在一個div中，然後在THAT div上使用ng-show。就像這樣：

  <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-表演和NG-隱藏，而NG-如果似乎工作<uib-accordion>內完美的罰款。感謝所有試圖幫助我們的人。

Answer 2

元素在頁面加載時可見，因爲範圍尚未鏈接到指令。 ng-cloak可以解決你的問題

Answer 3

嘗試使用ng-cloak

的ngCloak指令用於防止AngularJS HTML模板從在其原始（未編譯）形式的瀏覽器，而你的應用程序加載，略微顯示。

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

Answer 4

您同時使用ng-if和ng-show。嘗試刪除任何這個。兩者意味着相同的目的。

還可以使用ng-cloak，它可以防止瀏覽器在加載應用程序時以原始（未編譯）形式簡要顯示AngularJS html模板。

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>