Angular ng-cloak指令使用异常问题求助及解决

我最近在开发一个以Angular为前端、Spring为后端的Dropzone文件上传组件，为了避免页面加载时出现Angular表达式闪烁的情况，我打算使用ng-cloak指令，当时写的HTML代码如下：

<body ng-controller="fileCtrl" ng-cloak> 
  <div class="col-xs-6 col-xs-offset-3"> 
    <div class="well"> 
      <form action="" class="dropzone" dropzone="" id="dropzone"> 
        <div class="dz-default dz-message"> 
        </div> 
      </form> 
    </div> 
    <div class="pull-right"> 
      <button class="btn btn-success" ng-click="uploadFile()">Upload File</button> 
      <button class="btn btn-danger" ng-click="reset()">Reset Dropzone</button> 
    </div> 
    <div> 
      <form> 
        <label>File to download</label> 
        <input ng-model="filename" type="text" placeholder="Filename" /> 
        <a class="btn btn-primary" ng-href="{{ partialDownloadLink + filename }}">Download File</a> 
      </form> 
    </div> 
  </div> 
  <!-- Load Angular scripts--> 
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.17/angular.min.js"></script> 
  <script src="js/app.js"></script> 
  <script src="js/fileAppControllers.js"></script> 
  <script src="js/fileAppDirectives.js"></script> 
  <!-- Load Dropzone JS --> 
  <script src="js/dropzone/dropzone.js"></script> 
  <script type="text/javascript"> 
    Dropzone.autoDiscover = false; 
  </script> 
</body>

遇到的问题 #

• 添加ng-cloak指令后，页面的<body>元素直接消失不见；
• 用浏览器调试工具手动移除display:none样式后，<body>能正常显示，但拖放文件到Dropzone区域时，会出现文件闪烁的异常现象。

最终解决方法 #

折腾了好一会儿才发现问题所在：我忘记在<html>标签中添加ng-app="fileApp"属性了！

ng-cloak是Angular的内置指令，只有当Angular应用通过ng-app指定对应模块并完成初始化后，Angular才会自动移除ng-cloak对应的display:none样式。如果没有ng-app，Angular根本不会识别这个指令，那ng-cloak的默认隐藏样式就会一直生效，导致<body>被隐藏；而手动移除样式后，因为Angular应用未初始化，Dropzone和Angular的交互逻辑出现异常，也就引发了文件闪烁的问题。

内容的提问来源于stack exchange，提问作者Francisco Manuel Pinto