0

我们正在尝试将这个Stackoverflow示例合并到我们的AngularJS脚本中，但似乎无法弄清楚它为什么不能正常工作。

我们希望在呈现 JSON 数据之前显示一个加载图标，一旦 JSON 准备好，我们就希望隐藏该图标。

这些是我们在示例中使用的主要片段：'$scope.dataLoaded = false;' 'ng-hide="dataLoaded"' '$scope.dataLoaded = true;' 'ng-show="dataLoaded"'

如果有人能看到我们错过了什么或我们做错了什么，请告诉我们。谢谢你。

普朗克

HTML

<div class="page-header col-md-12">
  <h4><i class="fa fa-tasks"></i> Warranty Job</h4>
</div>
<div class="col-md-12"> 
  <p class="text-center" ng-hide="dataLoaded">
    <i class="fa fa-circle-o-notch fa-spin"></i>
  </p>

  <div class="panel panel-info" ng-controller="warrantySingleController" ng-show="dataLoaded">
    <div class="panel-heading">
      <h3 class="panel-title"><i class="fa fa-tasks"></i> {{warrantySingleData[0].Title}}</h3>
    </div>
    <div class="panel-body">
      <div class="bs-component">
       <table class="table table-striped table-hover" >
          <tbody>
            <tr><td>JobID: {{warrantySingleData[0].JobID}}</td></tr>
            <tr><td>Model: {{warrantySingleData[0].Model}}</td></tr>
            <tr><td>Title: {{warrantySingleData[0].Title}}</td></tr>
            <tr><td>Date: {{warrantySingleData[0].ReminderDate}}</td></tr>
          </tbody>
        </table> 
      </div>
    </div>
  </div>
</div>

控制器

.controller('warrantySingleController', function($scope, $http, $stateParams) {
  $scope.params = $stateParams.jobID[0];
  $scope.dataLoaded = false;
  $http({
    url: 'http://jsonstub.com/warranty/'+$scope.params,
    method: 'GET',
    dataType: 'json', 
    data: '',         
    headers: {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': 'http://run.plnkr.co',
        'JsonStub-User-Key': '1357f082-ea56-46f0-adc5-3e5c273f6f87',
        'JsonStub-Project-Key': 'e4f971a2-db30-45a0-80f9-bfa41b922c64'
    }
  }).success(function (data, status, headers, config) {
    $scope.warrantySingleData = data;
    $scope.dataLoaded = true;
  }).error(function(data,status,error,config){
    $scope.warrantySingleData =  [{heading:"Error",description:"Could not load json data"}];
    $scope.dataLoaded = false;
  });
})

ANWSER

<div ng-controller="warrantySingleController">
  <div class="page-header col-md-12">
    <h4><i class="fa fa-tasks"></i> Warranty Job</h4>
  </div>
  <div class="col-md-12"> 
    <p class="text-center" ng-hide="dataLoaded">
      <i class="fa fa-circle-o-notch fa-spin"></i>
    </p>

    <div class="panel panel-info"  ng-show="dataLoaded">
      <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-tasks"></i> {{warrantySingleData[0].Title}}</h3>
      </div>
      <div class="panel-body">
        <div class="bs-component">
         <table class="table table-striped table-hover" >
            <tbody>
              <tr><td>JobID: {{warrantySingleData[0].JobID}}</td></tr>
              <tr><td>Model: {{warrantySingleData[0].Model}}</td></tr>
              <tr><td>Title: {{warrantySingleData[0].Title}}</td></tr>
              <tr><td>Date: {{warrantySingleData[0].ReminderDate}}</td></tr>
            </tbody>
          </table> 
        </div>
      </div>
    </div>
  </div>
</div>
4

3 回答 3

1 
<div ng-controller="warrantySingleController">
  <div class="page-header col-md-12">
    <h4><i class="fa fa-tasks"></i> Warranty Job</h4>
  </div>
  <div class="col-md-12"> 
    <p class="text-center" ng-hide="dataLoaded">
      <i class="fa fa-circle-o-notch fa-spin"></i>
    </p>

    <div class="panel panel-info"  ng-show="dataLoaded">
      <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-tasks"></i> {{warrantySingleData[0].Title}}</h3>
      </div>
      <div class="panel-body">
        <div class="bs-component">
         <table class="table table-striped table-hover" >
            <tbody>
              <tr><td>JobID: {{warrantySingleData[0].JobID}}</td></tr>
              <tr><td>Model: {{warrantySingleData[0].Model}}</td></tr>
              <tr><td>Title: {{warrantySingleData[0].Title}}</td></tr>
              <tr><td>Date: {{warrantySingleData[0].ReminderDate}}</td></tr>
            </tbody>
          </table> 
        </div>
      </div>
    </div>
  </div>
</div>
于 2014-10-13T15:56:27.810 回答
0

这可能是原型继承问题。尝试将您的范围包装在某个对象中，例如：

$scope.wrapper = {
   dataLoaded: false
}

并通过 {{wrapper.dataLoaded}} 引用它

阅读：https ://github.com/angular/angular.js/wiki/Understanding-Scopes#javascript-prototypal-inheritance

于 2014-10-13T15:52:19.313 回答
0

正如@Pzyon 所说，该属性dataLoaded超出范围并由warrantyListController控制器管理。这里有两种方法来处理这个问题，除非有令人信服的理由不这样做，否则我会选择选项#1。

  1. 将文件的内容包装warranty/single.html在一个 div 中，并由warrantySingleController控制器管理整个内容。

  2. 使用$emit和/或$broadcast发送消息warrantySingleController到warrantyListController数据已加载

于 2014-10-13T15:46:44.843 回答