不知何故,AngularJS中的ng-cloak不起作用.我想在加载页面时隐藏{{}}.因为它看起来很糟糕.
<!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>
我有一些HTML喜欢
<p class="noresults">{{numberOfContacts}} Results Are Available</p>
{{numberOfContacts}}在Angular加载之前我是否可以隐藏？所以它会说Results Are Available
我似乎有一些解决方案,比如在Angular加载之前隐藏整个身体,但如果可能,我宁愿不这样做.
我是AngularJS的新手,并尝试解决在ng-if条件得到评估之前显示某些HTML代码的问题.我正在许多其他堆栈中提到的流式URL中提到ng-cloak,但它仍然不适用于我.我正在尝试加载默认图像,如果URL上的实际图像为空白,并且当页面加载时,即使实际URL存在,它首先使用默认图像闪烁,然后加载实际图像,因为ng-cloak无法正常工作.
请帮忙.
我有下面的代码和CSS等
的index.html
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<base href="/">
<title>Some App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-sanitize.min.js"></script>
<style type="text/css">
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
</style>
</head>
<body ng-app="app">
some code here
<div ng-view></div>
</body>
</html>
other.html
<div class="content">
<div style="width: 100px; height: 40px;">
<div ng-if="image.small">
<img src="{image.small}}">
</div>
<div ng-if="!image.small" ng-cloak>
<img src="image/default.png">
</div>
</div>
当我按住F5键下页中,AngularJS变量{{message}}和{{titleHelp}}忽明忽暗地闪烁.
我已经读过要删除它,我可以放入ng-cloakbody标签.然而,这没有效果,即它不会停止闪烁.
即使我把它放在这里:
<div ng-cloak>message: {{message}}</div>
那个变量仍然闪烁.
还有什么可以让ng-cloak工作？
<html>
<head>
<style type="text/css">
</style>
</head>
<body ng-app="mainModule" ng-controller="dataController" ng-cloak>
<div>message: {{message}}</div>
<div><input type="checkbox" ng-model="desired" ></div>
<div>Title: <input type="text" ng-focus="showHelp()" ng-blur="removeHelp()" ng-model="title"
ng-copy="handleCopy()" /> {{titleHelp}}</div>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src ="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
var mainModule = angular.module('mainModule', []);
function dataController($scope) {
$scope.desired = true;
$scope.message = 'This is a test.';
$scope.showHelp = function () {
$scope.titleHelp = 'this is the title help';
};
$scope.removeHelp = function () { …在我的Angular应用程序中,我的菜单组件html代码在页面加载时会短暂显示.即使我使用display none css隐藏菜单html根元素,当页面开始加载时仍会显示html.我已经阅读了很多关于ng-cloak(https://docs.angularjs.org/api/ng/directive/ngCloak)的内容,但似乎Angular 4没有ngCloak.
所以我不知道如何防止这种不愉快的影响.
Angular 4是否有ng-cloak的等效指令？如何正确显示页面而不显示加载时没有样式的HTML？