AngularJS ngCloak无法正常工作

我有一个帖子类别页面，如果没有帖子，它应该会显示一条消息。它在页面加载时显示HTML，然后隐藏它。 ngCloak听起来像是应该完成这项工作，但我没有任何运气。下面是我的模板文件中的HTML：AngularJS ngCloak无法正常工作

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

来源

2016-09-22 Callum

确保这个CSS应该装在从头部标签开始.. –

嗨，我也试过了，并没有奏效 – Callum

吴-cloack指导工作完全在比您预期的另一种方式。它不隐藏HTML，一旦模板被编译，它就会显示它。原因是浏览器中的模板编译需要一些时间，在这些时间之后，没有数据的丑模板将显示给用户。要隐藏未编译的模板，需要在模板编译后添加ng-cloak类（使其不可见）和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>

来源

2016-09-22 16:26:05

好的，谢谢你，这可以解释为什么它不是加工。所以我试了这个'ng-hide ng-show =“data.posts.length == 0”'并得到了相同的结果。有任何想法吗？ – Callum

您是否将ng-hide添加为类或属性？ –

我已经添加了一个演示使用ng-hide类的代码片段 –

AngularJS ngCloak无法正常工作

回答

相关问题