AngularJS: 데이터가 로드될 때까지 HTML 로드 표시

AngularJS: 데이터가 로드될 때까지 HTML 로드 표시

어떻게 각도를 가지나요?JS는 데이터 로딩이 완료될 때까지 로딩 스피너를 보여줍니다.

컨트롤러에 다음이 있는 경우$scope.items = [{name: "One"}]정적으로 설정하고 채워지는 AJAX 로더$scope.items[0]['lateLoader'] = "Hello", 스피너가 AJAX 로드가 완료될 때까지 보여주고 검색된 데이터로 바운드 스팬을 채웠으면 합니다.

<ul ng-repeat="item in items">
  <li>
    <p>Always present: {{item.name}}</p>
    <p>Loads later: <span ng-bind="item.lateLoader"><i class="icon icon-refresh icon-spin"></i></span></p>
  </li>
</ul>

이 코드는 바운드 스팬을 즉시 채웁니다.item.lateLoader스피너가 아무것도 아닌 채로 교체된 것이 비어 있습니다.

이걸 어떻게 깨끗하게 해야 할까요?

다른 답변에 따라 사용자 지정 지침을 만들겠지만, 보다 복잡한 기능을 사용하기 전에 학습하는 것이 좋을 수 있는 지침 없이 수행할 수 있는 방법은 다음과 같습니다.몇 가지 유의할 사항:

1. setTimeout을 사용하여 ajax 호출 시뮬레이션
2. 로드 아이콘은 사전 로드되며 데이터가 로드될 때 숨겨집니다.단순한 ng-hide 지시사항입니다.
3. 내 예제에는 숨겨진 텍스트만 로드하는 이미지가 없습니다(분명히 HTML에는 올바른 CSS 참조가 있을 것입니다).

데모: http://plnkr.co/edit/4XZJqnIpie0ucMNN6egy?p=preview

보기:

<ul >
  <li ng-repeat="item in items">
    <p>Always present: {{item.name}}</p>
    <p>Loads later: {{item.lateLoader}} <i ng-hide="item.lateLoader"  class="icon icon-refresh icon-spin">loading image i don't have</i></p>
  </li>
</ul>

컨트롤러:

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.items = [{name: "One"}];
  setTimeout(function() {
    $scope.$apply(function() {
     $scope.items[0].lateLoader = 'i just loaded';  
    });
  }, 1000);
});

저는 사실 이것에 대해 한동안 해결책을 사용해 왔습니다. 이는 제 생각에 시간 초과를 사용하는 것보다 효과적이고 더 나은 방법입니다.저는 $리소스를 사용하고 있지만, $http에서도 같은 작업을 할 수 있습니다.$resource 개체에 로드된 비트를 true로 설정하는 다음 코드에 추가합니다.

$scope.customer = $resource(dataUrl + "/Course/Social/" + courseName)
    .get({}, function (data) { data.loaded = true; });

그러면 제 견해로는 다음을 사용할 수 있습니다.

ng-hide="customer.loaded"

물론, $ 리소스를 컨트롤러에서 직접 사용하지는 않고 CustomerRepository 서비스로 추출합니다. 하지만 여기서는 이 리소스를 좀 더 쉽게 보여줄 수 있었습니다.

맞춤형 지시문을 만들고 스피너로 기본 마크업을 하겠습니다.

다음은 사용자 지정 지침에 대한 몇 가지 링크입니다.

1) 에그헤드 영상 대박!http://www.egghead.io/video/xoIHkM4KpHM

2) 지침서에 관한 공식 각도 문서 http://docs.angularjs.org/guide/directive

3) 60분 안에 각도에 대한 좋은 개요 http://weblogs.asp.net/dwahlin/archive/2013/04/12/video-tutorial-angularjs-fundamentals-in-60-ish-minutes.aspx

@luc마,

좋은 대답입니다. $timeout을 주입하고 네이티브 타임아웃 기능을 대체하는 것도 대안이 될 수 있습니다.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $timeout) {

        $scope.name = 'World';
        $scope.items = [{name: "One"}];
        $timeout(function() {
                $scope.$apply(function() {
                        $scope.items[0].lateLoader = 'i just loaded';  
                });
        }, 1000);
});

언급URL : https://stackoverflow.com/questions/16174238/angularjs-show-loading-html-until-data-is-loaded