javascript - 在 AngularJS 中加载 JSON 数据之前出现 "loading"或 "wait"消息

Question

我已经看到了一些关于如何使用 $http get() 请求从 URL 或单独文件加载 JSON 数据之前放置等待消息的解决方案，但我还没有在 HTML 中看到具有 smarty 格式的 JSON文件本身。在本例中，{$data} 是我的 JSON 数组，如下所示 {"title":"A2378","sub_name":"A2333", .....}。在我的 json 加载到 html 文件之前，有什么简单的方法可以放置等待消息吗？

<script type="text/javascript">
var app= angular.module('mysearch', []);
app.controller('mysearchController', ['$scope', function($scope){
        $scope.products = {$data}; 
]);
</script>

<div ng-app="mysearch">
   <div ng-controller="mysearchController">
      <div ng-repeat="item in products">
           {{item.sub_name}}
      </div>
      <p> {{item.title}}</p>
   </div>
</div>

提前致谢!

Answer 1

只需在您的范围中设置一个标志来指示您是否已加载数据:

<div ng-app="mysearch">
   <div ng-controller="mysearchController">
      <div ng-if="!loaded">Loading...</div>
      <div ng-if="loaded">
        <div ng-repeat="item in products">
           {{item.sub_name}}
           <p> {{item.title}}</p>
        </div>
      </div>
   </div>
</div>

然后，当您完成加载数据时，您的 Controller 可以将该标志设置为 true。例如:

app.controller('mysearchController', ['$scope', function($scope){
    $scope.loaded = false;
    $http.get('...').then(function(response) {
         $scope.products = response.data;
         $scope.loaded = true;
    });
]);

显然，如果您通过其他机制加载数据，您的代码看起来不会完全像这样，但想法是相同的，只需在数据完全加载时切换一个标志即可。