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ブールは、コントローラには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-ショーが正しくfalseに設定されているように見えますが、要素はとにかく現れるいくつかの理由。私がブラウザにいる間にボタンをvisibleブール値にバインドして変更すると、要素が表示されて正しく消えます。

Answer 1

。

ng-showは、最初にfalseに設定され、uib-accordionタグ内で使用された場合、正しく動作しません。私が問題を解決するためにしたのは、divにアコーディオンをラップし、代わりにその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-場合ながら<uib-accordion>内部完璧に正常に動作するような問題は、ページのロード時にのみNG-ショーとngの非表示で起こりました。とにかく助けようとしたみんなに感謝します。

Answer 2

要素は、スコープがディレクティブにまだリンクされていないため、ページの読み込み時に表示されます。 ng-cloakは

Answer 3

がngCloakディレクティブは、アプリケーションのロード中に簡単にその生（コンパイルされていない）形式でブラウザに表示されているからAngularJS HTMLテンプレートを防ぐために使用されるng-cloak

を使用してみてください、あなたの問題を解決することができます。

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

Answer 4

あなたはng-ifとng-showの両方を使用しています。誰かを削除してみてください。どちらも同じ目的のためのものです。

また、AngularJS htmlテンプレートが、アプリケーションの読み込み中に生の（コンパイルされていない）形式でブラウザによって短時間表示されないようにするには、ng-cloakを使用してください。角度にUIB-アコーディオンを使用して、同じ問題につまずく人のため

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>