当页面加载时，ng-cloak不起作用 [英] ng-cloak not working when page load
问题描述
我是AngularJS的新手，尝试解决一些HTML代码在ng-if条件被评估之前显示的问题。正如许多其他流程URL中提到的那样，我正在使用ng-cloak，但它仍然不适用于我。我想加载默认图像，如果URL上的实际图像是空白的，并且当页面加载时，即使实际URL存在，它也会首先使用默认图像闪烁并加载实际图像，因为ng-cloak无法正常工作。
请帮助。
我有下面的代码和CSS等。
Index.html
<！DOCTYPE>
< html>
< head>
< meta charset =UTF-8>
< base href =/>
< title>部分应用程式< / title>
< link rel =stylesheethref =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 {
显示：无！重要;
}
< / style>
< / head>
< body ng-app =app>
这里的一些代码
< 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.smallng-cloak>
< img src =image / default.png>
< / div>
< / div>
您可以应用 ng-披风放入您的身体标记中。所以，你的整个身体只有在角度编译后才会显示。
< body ng-cloak ng-app =app >
..
< / body>
这将解决您的问题。
I am new to AngularJS and trying to fix the issue where some of the HTML code displays before ng-if condition gets evaluated. I am hsing ng-cloak as mentioned in many other stack over flow URLs but it still doesn't work for me. I am trying to load default image if actual image on URL is blank and when page loads, even if actual URL is there, it first blinks with default image and than load actual image because ng-cloak doesn't work correctly.
Please help.
I have below code and CSS etc.
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>
You can apply ng-cloak in your body tag. So, you whole body will be displayed only after angular's compilation.
<body ng-cloak ng-app="app">
..
</body>
This will solve your issue.
这篇关于当页面加载时，ng-cloak不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
