AngularJS ngCloak不工作
AngularJS ngCloak不工作
提问于 2016-09-22 15:29:25
我有一个帖子类别页面，如果没有帖子，应该显示一条消息。它在页面加载时显示HTML，然后隐藏它。ngCloak听起来应该能胜任这份工作，但我没有任何运气。下面是我的模板文件中的HTML：
<div ng-show="data.posts.length == 0" ng-cloak>
<div class="no-posts">
<h2>Coming Soon</h2>
<p>Sorry there are posts here yet, check back soon.</p>
</div>
</div>这是我添加到sass文件中的CSS。我还尝试将它直接添加到页面上的CSS中，但是它没有工作：
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}我遗漏了什么？这应该很简单，对吧？
编辑:我也把它添加到HTML中，但是它没有工作：
<style type="text/css">
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
</style>回答 1
Stack Overflow用户
发布于 2016-09-22 16:26:05
Ng-cloack指令完全以另一种方式工作，这比你想象的要好。它不会隐藏HTML，它会在模板编译后显示它。原因是浏览器中的模板编译需要一段时间，没有数据的丑陋模板将显示给用户。要隐藏未编译的模板，需要添加ng-掩蔽类(使其不可见)和ng-cloack指令，以在模板编译后显示。这里描述的问题还有另一个解决方案:您必须向元素中添加'ng-hide‘类，并且它将被隐藏，直到ng-show的表达式不会获得'true’值为止。
window.setTimeout(function() {
angular.module('demo', [])
.controller('DemoController', ['$timeout', function($timeout) {
var vm = this;
vm.isLoaded = true;
}]);
angular.bootstrap(document, ['demo']);
}, 3000);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-controller="DemoController as vm">
<div>Message below will appear in 3 seconds</div>
<div class="ng-hide" ng-show="vm.isLoaded">Data is loaded</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39643140
复制相关文章
相似问题
腾讯云开发者
