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://you

Answer 1

Since you asked for a directive, try this.

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

      elem.hide();

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

    }
  }
});

Stick (show-on-load) in your element, and in your controller inject $rootScope, and use this broadcast event when the html has loaded.

$rootScope.$broadcast('show');