如何正确使用 ng-cloak 指令? [英] How to correctly use ng-cloak directive?

查看：34 发布时间：2021/11/9 3:38:20 javascript angularjs angularjs-directive ngcloak

本文介绍了如何正确使用 ng-cloak 指令?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

<html lang="en" ng-app><头><meta charset="UTF-8"><title>Angular Sample</title><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></html>

解决方案

从这里添加这个css

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {显示:无！重要；}

并在您的父 div 或您定义应用的任何地方使用类名或属性.

例如:

Somehow, ng-cloak in AngularJS doesn't work. I want to hide {{ }} while loading the page. Because it looks awful.

<!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>

解决方案

Add this css from here

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

and use either the class name or attribute on your parent div or anywhere you have defined your app.

eg:

<div ng-app="Random" class="ng-cloak">
</div>

这篇关于如何正确使用 ng-cloak 指令?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何正确使用 ng-cloak 指令? [英] How to correctly use ng-cloak directive?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

如何正确使用 ng-cloak 指令? [英] How to correctly use ng-cloak directive?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭