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-show被正确设置为false，但无论如何都会显示该元素。如果我将按钮绑定到visible布尔值并在浏览器中更改它，则该元素会出现并正确消失。

Answer 1

元素在页面加载时可见，因为范围尚未与指令相关联。 ng-cloak可以解决您的问题

Answer 2

尝试使用ng-cloak

ngCloak指令用于防止浏览器在加载应用程序时以原始（未编译）形式短暂显示AngularJS html模板。

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

Answer 3

您正在使用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>

Answer 4

对于任何在角度使用uib-accordions时遇到同样问题的人。

如果最初设置为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-show和ng-hide，而ng-if似乎在<uib-accordion>内完全正常。感谢所有试图提供帮助的人。

Answer 5

添加 class =“ ng-hide”和ng-cloak。 <span class="bag-badge bag-melon ng-hide" ng-show="itemsincart>0" ng-cloak>{{itemsincart}}</span>

它为我工作，并且避免了页面加载时元素的闪烁。

ng-show设置为false不会在页面加载时隐藏元素

5 个答案: