在JSON加载之前加载消息或微调器图标与角度模块和控制器在同一文件中加载

时间:2016-06-14 20:52:47

标签: javascript angularjs json angularjs-scope smarty

我试图想办法不使用$ http.get()或$ resource从单独的文件或URL加载我的JSON数据,因为我可以使用像$ scope.products这样的智能代码加载我的JSON数据= {$ data};我想在加载JSON数据之前加载微调器图标或“加载”消息,因为角度代码的花括号很难显示。以下是我的代码,我们将不胜感激。

<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>

1 个答案:

答案 0 :(得分:1)

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

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

修改1:

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

使用ng-hide显示角色加载时的微调器,并显示范围加载时ng-show