加载时AngularJs ng-hide

时间:2016-05-23 14:43:33

标签: angularjs

我有4种形式,使用角度ng-hide和ng-show在需要时显示每种形式。但是当页面最初加载时,它会在加载时显示所有表单,并且只在加载完成时隐藏它们。加载时看起来真的很糟糕。有没有办法阻止这种情况发生?

2 个答案:

答案 0 :(得分:1)

CSS:

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

HTML:

<body ng-cloak> ... </body>

会起作用,但它会隐藏整个身体。 https://docs.angularjs.org/api/ng/directive/ngCloak

  

该指令可以应用于元素,但首选用法是将多个ngCloak指令应用于页面的一小部分,以允许逐步呈现浏览器视图。

因此,将ng-cloak应用于特定元素会更好:

<div ng-cloak> ... </div>
<div ng-cloak> ... </div>

答案 1 :(得分:0)

ng-cloak将为您效劳

示例:

在你的css中:

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

并在您的代码中:

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