首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何正确使用ng-cloak指令?

如何正确使用ng-cloak指令?
EN

Stack Overflow用户
提问于 2015-03-30 13:58:33
回答 11查看 65.2K关注 0票数 66

不知何故,AngularJS中的ng-cloak无法工作。我想在加载页面时隐藏{{ }}。因为它看起来很糟糕。

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en" ng-app>
    <head>
        <meta charset="UTF-8">
        <title>Angular Sample</title>
    </head>
    <body ng-model="isShow" ng-init="isShow=true">

        <p ng-show="isShow"><span ng-cloak>{{ isShow }}</span></p>
        <p ng-show="!isShow"><span ng-cloak>{{ isShow }}</span></p>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    </body>
</html>
EN

回答 11

Stack Overflow用户

发布于 2015-03-30 14:23:26

here添加此css

代码语言:javascript
复制
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

并在父div或已定义应用程序的任何位置使用类名或属性。

例如:

代码语言:javascript
复制
<div ng-app="Random" class="ng-cloak">
</div>
票数 105
EN

Stack Overflow用户

发布于 2015-03-30 14:00:35

来自the Angular docs

为获得最佳结果,angular.js脚本必须加载到html文档的head部分;或者,上面的css规则必须包含在应用程序的外部样式表中。

票数 31
EN

Stack Overflow用户

发布于 2015-03-30 14:00:45

您必须在CSS中指定以下规则:

代码语言:javascript
复制
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}
票数 11
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/29339293

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档