4

I have defined an error banner in my angular app which is supposed to be visible only when an error event is triggered and there it is supposed to 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 while angular is loading, the banner is visible with {{ root.error.message }} as an error message. I have tried using ng-cloak (body(ng-cloak)) and ng-init to hide it but it is not working.

I believe I can tweak the css to play with the display properties but this would be quite messy.

What are the common best practices to solve this?

Spearfisher
  • 8,445
  • 19
  • 70
  • 124
  • Look at this question http://stackoverflow.com/questions/11249768/angularjs-ng-cloak-ng-show-elements-blink Maybe there is an answer for you issue – just-boris Oct 06 '14 at 10:25

1 Answers1

1

As per the AngularJS website (https://docs.angularjs.org/api/ng/directive/ngCloak) the solution is the following CSS:

[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}
JME
  • 3,592
  • 17
  • 24