Angularjs - Hide content until DOM loaded

Question

I am having an issue in Angularjs where there is a flicker in my HTML before my data comes back from the server.

Here is a video demonstrating the issue: http://youtu.be/husTG3dMFOM - notice the #| and the gray area to the right.

I have tried ngCloak with no success (although ngCloak does prevent the brackets from appearing as promised) and am wondering the best way to hide content until the HTML has been populated by Angular.

I got it to work with this code in my controller:

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);         }); } 

...but I have heard time and time again not to manipulate the DOM from a controller. My question is how can I achieve this using a directive? In other words, how can I hide the element that a directive is attached to until all content is loaded from the server?

Answer 1

In your CSS add:

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

and just add a "ng-cloak" attribute to your div like here:

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

doc: https://docs.angularjs.org/api/ng/directive/ngCloak

Answer 2

On your caseWrap element, put ng-show="contentLoaded" and then where you currently have $('#caseWrap').show(); put $scope.contentLoaded = true;

If the caseWrap element is outside this controller, you can do the same kind of thing using either $rootScope or events.