AngularJS ng-show / ng-hide答案

【问题标题】：AngularJS ng-show / ng-hideAngularJS ng-show / ng-hide
【发布时间】：2014-12-08 05:36:07
【问题描述】：

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

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

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

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

Plunker

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>

【问题讨论】：

您在定义 dataLoaded 变量的控制器范围之外使用 'ng-hide="dataLoaded"'。您要么需要在更高的 DOM 元素上注册warrantySingleController，要么更改该 ng-hide 逻辑。顺便问一下：您说的工作不正常是什么意思？

标签： json angularjs loading ng-show ng-hide

【解决方案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>

【讨论】：

【解决方案2】：

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

$scope.wrapper = {
   dataLoaded: false
}

并通过 {{wrapper.dataLoaded}}

引用它

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

【讨论】：

【解决方案3】：

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

将文件warranty/single.html 的内容包装在一个div 中，并由warrantySingleController 控制器管理整个内容。
使用$emit 和/或$broadcast 将消息从warrantySingleController 发送到warrantyListController，表明数据已加载

【讨论】：