Angularjs-DOM이로드 될 때까지 콘텐츠 숨기기

Angularjs-DOM이로드 될 때까지 콘텐츠 숨기기

---

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

다음은 문제를 보여주는 비디오입니다. 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-cloak "속성을 추가하면 됩니다.

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

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

---

caseWrap 요소에 넣은 ng-show="contentLoaded"다음 현재 $('#caseWrap').show();넣은 위치$scope.contentLoaded = true;

caseWrap 요소가이 컨트롤러 외부에 있으면 $ rootScope 또는 events를 사용하여 같은 종류의 작업을 수행 할 수 있습니다 .

---

CSS에 다음을 추가하십시오.

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

각도 템플릿 컴파일이 충분히 빠르지 않습니다.

최신 정보

컨트롤러에서 DOM 조작을해서는 안됩니다. 할 수있는 일은 두 가지가 있습니다. 1. 지시문을 통해 컨트롤러 범위 내에서 값의 변경을 가로 챌 수 있습니다! 귀하의 경우에는 감시하려는 속성이 할당 된 속성으로 지시문을 만듭니다. 귀하의 경우에는 caseData. casedata가 거짓이면 숨 깁니다. 그렇지 않으면 보여주세요.

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>

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

---

지시문을 요청 했으므로 이것을 시도하십시오.

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

      elem.hide();

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

    }
  }
});

요소와 컨트롤러에 $ rootScope를 삽입하고 (로드시 표시) html이로드되면이 브로드 캐스트 이벤트를 사용합니다.

$rootScope.$broadcast('show');

---

저는 Zack의 응답을 사용하여 일부 사람들에게 유용 할 수있는 '로드'지시문을 만들었습니다.

주형:

<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에서 angular-material을 사용합니다.

---

The accepted answer didn't work for me. I had some elements that had ng-show directives and the elements would still show momentarily even with the ng-cloak. It appears that the ng-cloak was resolved before the ng-show returned false. Adding the ng-hide class to my elements fixed my issue.

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