Angularjs - DOM이 로드될 때까지 내용 숨기기

Angularjs - DOM이 로드될 때까지 내용 숨기기

Angularjs에서 데이터가 서버에서 돌아오기 전에 HTML에서 깜박임이 발생하는 문제가 있습니다.

이 문제에 대해 설명하는 비디오는 다음과 같습니다.http://youtu.be/husTG3dMFOM - #| 및 오른쪽 회색 영역에 주목하십시오.

저는 ngCloak을 시도했지만 성공하지 못했습니다(ngCloak으로 인해 약속대로 브래킷이 표시되지 않습니다만).HTML이 Angular로 채워질 때까지 콘텐츠를 숨길 수 있는 최선의 방법이 궁금합니다.

컨트롤러의 다음 코드로 동작하도록 했습니다.

var caseCtrl = function($scope, $http, $routeParams) {
    $('#caseWrap').hide(); // hides when triggered using jQuery
    var id = $routeParams.caseId;

    $http({method: 'GET', url: '/v1/cases/' + id}).
        success(function(data, status, headers, config) {                   
            $scope.caseData = data;

            $('#caseWrap').show(); // shows using jQuery after server returns data
        }).
        error(function(data, status, headers, config) {
            console.log('getCase Error', arguments);
        });
}

하지만 컨트롤러에서 DOM을 조작하지 말라는 말을 여러 번 들었습니다.제가 궁금한 것은 지시문을 사용하여 어떻게 이 작업을 수행할 수 있는가 하는 것입니다.즉, 모든 콘텐츠가 서버에서 로드될 때까지 디렉티브가 첨부된 요소를 숨기려면 어떻게 해야 합니까?

CSS 추가:

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

div에 다음과 같이 "ng-timeout" 속성을 추가합니다.

<div id="template1" ng-cloak>{{scoped_var}}<div>

문서: https://docs.angularjs.org/api/ng/directive/ngCloak

고객님의 경우 랩 요소,ng-show="contentLoaded"그리고 현재 당신이 가지고 있는 것은$('#caseWrap').show();놓다$scope.contentLoaded = true;

caseWrap 요소가 이 컨트롤러 외부에 있는 경우 $rootScope 또는 이벤트를 사용하여 동일한 작업을 수행할 수 있습니다.

다음 항목을 CSS에 추가합니다.

[ng\:cloak],[ng-cloak],.ng-cloak{display:none !important}

각도 템플릿을 컴파일하는 속도가 느립니다.

갱신하다

컨트롤러에서는 DOM 조작을 하지 말아 주세요.수행할 수 있는 두 가지 방법이 있습니다. 1. 명령을 통해 컨트롤러 범위 내의 값 변경을 가로챌 수 있습니다.이 경우 감시할 속성이 할당된 속성으로 디렉티브를 만듭니다.당신의 경우, 그것은caseDatacasedata가 거짓이면 숨깁니다.그렇지 않으면 보여주세요.

2. 더 간단한 방법은 ngShow= 'casedata'를 사용하는 것입니다.

코드

var myApp = angular.module('myApp', []);
myApp.controller("caseCtrl", function ($scope, $http, $routeParams, $timeout) {
    $scope.caseData = null;
    //mimic a delay in getting the data from $http
    $timeout(function () {
        $scope.caseData = 'hey!';
    }, 1000);

})
    .directive('showHide', function () {
    return {
        link: function (scope, element, attributes, controller) {
            scope.$watch(attributes.showHide, function (v) {
                if (v) {
                    element.show();
                } else {
                    element.hide();
                }
            });
        }
    };
});

HTML

<div ng-controller='caseCtrl' show-hide='caseData'>using directive</div>
<div ng-controller='caseCtrl' ng-show='caseData'>using ngShow</div>

JSFIDLE:http://jsfiddle.net/mac1175/zzwBS/

지시사항을 요청하셨으니, 이걸 시도해 보세요.

.directive('showOnLoad', function() {
  return {
    restrict: 'A',
    link: function($scope,elem,attrs) {

      elem.hide();

      $scope.$on('show', function() {
        elem.show();
      });

    }
  }
});

요소에 고정(show-on-load)하고 컨트롤러에 $rootScope를 주입하여 html이 로드되었을 때 이 브로드캐스트이벤트를 사용합니다.

$rootScope.$broadcast('show');

저는 잭의 답변을 '부하' 지시를 만들기 위해 사용했는데, 어떤 사람들에게는 유용할 수 있습니다.

템플릿:

<script id="ll-loading.html" type="text/ng-template">
  <div layout='column' layout-align='center center'>
    <md-progress-circular md-mode="indeterminate" value="" md-diameter="52"></md-progress-circular>
  </div>
</script>

지시:

    directives.directive('loading', function() {
  return {
    restrict: 'E',
    template: 'll-loading.html',
    link: function($scope,elem,attrs) {

      elem.show();

      $scope.$on('loaded', function() {
        console.log("loaded: ");
        elem.hide();
      });

    }
  }
});

이 예에서는 html에서 각도 재료를 사용합니다.

나는 받아들여진 대답이 통하지 않았다.ng-show 디렉티브가 있는 요소가 몇 개 있었는데, ng-cloak을 사용해도 그 요소는 잠시 동안만 표시됩니다.ng-cloak은 ng-show가 false를 반환하기 전에 해결된 것으로 보입니다.요소에 ng-hide 클래스를 추가하면 문제가 해결되었습니다.

언급URL : https://stackoverflow.com/questions/18133319/angularjs-hide-content-until-dom-loaded