angularjs - 执行运行块时未渲染 DOM

Question

我想在我的 AngularJS 应用程序中加载 json 数据时显示“正在加载...”消息。显示消息和加载数据是在我的主模块的运行块中完成的。问题是执行 run 块时浏览器没有渲染 DOM，因此没有显示消息。运行块究竟是什么时候执行的？我怎样才能实现我想要的：首先显示页面，然后开始加载数据并显示一条消息？

我的代码在这里：www.esatoivola.net/kirkkovuosi

Answer 1

“运行块究竟是什么时候执行的？”

运行块 - 在创建注入器后执行并用于启动应用程序。只有实例和常量可以注入运行块。这是为了防止在应用程序运行时进行进一步的系统配置。--模块文档

.

“我怎么能……先显示页面，然后开始加载数据并显示消息？”

您可以使用 ng-show 和 $scope 或 $rootScope 属性（最初设置为 true）来控制显示“正在加载”消息。您的主控制器可以加载数据，当数据返回时，设置一些与视图绑定的 $scope 属性并将“showLoadingMessage”属性设置为 false。

HTML：

<div ng-controller="MyCtrl">
  <div ng-show="showLoadingMessage">Loading... </div>
  <ul>
     <li ng-repeat="item in data">
        ....
     </li>
  </ul>
</div>

控制器：

function MyCtrl($scope, $resource) {
    $scope.showLoadingMessage = true;
    var dataResource = $resource('/somewhere/else');
    dataResource.query( function(data) {
       $scope.showLoadingMessage = false;
       $scope.data = data; 
    });
}