javascript - AngularJS ngCloak 不工作

Question

我有一个帖子类别页面，如果没有帖子，它应该显示一条消息。它在页面加载时显示 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 head 中，但它不起作用:

<style type="text/css">
  [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
  }
</style>

Answer 1

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