在 JSON 加载到与 angular 模块和控制器相同的文件之前加载消息或微调器图标

Question

我正在尝试找出一种不使用 $http.get() 或 $resource 从单独的文件或 URL 加载我的 JSON 数据的方法，因为我可以加载我的 JSON 数据使用像 $scope.products = {$data} 这样的聪明代码；我想在我的 JSON 数据加载之前加载微调器图标或 "loading" 消息，因为 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 显示您的范围何时加载

在 JSON 加载到与 angular 模块和控制器相同的文件之前加载消息或微调器图标

Loading message or spinner icon before JSON loads in the same file as angular module and controller

javascript

angularjs

json

angularjs-scope

smarty