页面加载时angularjs ng-cloak无法正常工作 [英] angularjs ng-cloak is not working when page load
问题描述
我是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>
您可以在body标记中应用ng-cloak.因此，只有在对angular进行编译之后，您的整个身体才会显示出来.
<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 using 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 then loads the 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.
这篇关于页面加载时angularjs ng-cloak无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
