How to hide element while loading in Angular js

Question

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') &times;
          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?

Look at this question stackoverflow.com/questions/11249768/… Maybe there is an answer for you issue — just-boris
– just-boris, Commented Oct 6, 2014 at 10:25

JME · Accepted Answer · 2014-10-06 11:59:09Z

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

answered Oct 6, 2014 at 11:59

JME

3,63220 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to hide element while loading in Angular js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related