How to hide an element when loading in Angular js

Question

I defined an error banner in my angular application, which should be visible only when the error event is triggered and there it should be hidden when the page loads.

Here is my jade code:

  div.container.content(ng-init='root.error.show = false')
    div.col-md-12.error-container.ng-cloak(ng-show='root.error.show')
      div.alert.alert-danger.alert-dismissible(role='alert')
        button.close(type='button')
          span(aria-hidden='true', ng-click='root.error.show = !root.error.show') ×
          span.sr-only Close
        p {{ root.error.message }}

My controller

exports.RootCtrl = function RootCtrl($scope, $log) {
  var self = this;
  this.error = {
    show: false,
    message: 'Oups, something wrong just happend'
  }

  $scope.$on('error', function(event, data) {
    self.error.show = true;
    self.error.message = data;
  })
}

My problem is loading angular, the banner is displayed with {{ root.error.message }}as an error message. I tried using ng-cloak (body(ng-cloak))and ng-initto hide it, but it does not work.

I believe that I can tweak the CSS to play with the properties of the screen, but that would be pretty messy.

What are the most common methods to solve this problem?

Answer 1

AngularJS (https://docs.angularjs.org/api/ng/directive/ngCloak) CSS:

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