javascript - 在 JSON 加载到与 Angular 模块和 Controller 相同的文件中之前加载消息或微调器图标

Question

我正在尝试找出一种不使用 $http.get() 或 $resource 从单独的文件或 URL 加载我的 JSON 数据的方法，因为我可以使用像 $scope.products 这样的聪明代码加载我的 JSON 数据= {$数据};我想在我的 JSON 数据加载之前加载一个微调器图标或一个“正在加载”消息，因为来自 Angular 代码的花括号很难显示。下面是我的代码，如有任何想法，我们将不胜感激。

<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

你应该使用 ng-cloak 指令。它可以防止文档在加载 AngularJS 时显示未完成的 AngularJS 代码。这样的一个例子是:

  <element ng-cloak>{{yourdata}}</element>

编辑 1:

https://jsfiddle.net/ph110293/ou5e1dsv/

使用 ng-hide 暂时显示你的微调器是你的 Angular 负载，使用 ng-show 显示你的示波器何时加载