AngularJS ng-show/ng-hide

Question

Мы пытаемся включить этот пример Stackoverflow в наш сценарий AngularJS и не можем понять, почему он работает неправильно.

Мы хотим отображать значок загрузки до тех пор, пока данные JSON не будут визуализированы, после того, как JSON будет готов, мы хотим, чтобы значок спрятался.

Это основные фрагменты, которые мы использовали в примере: '$ 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

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

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

Answer 2

Как @Pzyon сказал, что свойство dataLoaded выходит за рамки и управляется контроллером warrantyListController. Вот два способа справиться с этим, если нет веских причин не делать этого, я бы пошел на вариант №1.

1. Wrap содержимое файла warranty/single.html в DIV, и есть все это под управлением контроллера warrantySingleController.

2. Использование $emit и/или $broadcast отправить сообщение от warrantySingleController к warrantyListController, что данные загружены

Answer 3

Это может быть protoypal вопрос наследования. Попробуйте обернуть сферу в какой-то объект, например:

$scope.wrapper = { 
    dataLoaded: false 
} 

и ссылки на него {{}} wrapper.dataLoaded

Прочитайте это: https://github.com/angular/angular.js/wiki/Understanding-Scopes#javascript-prototypal-inheritance