CODEWITHSUNDEEP
javascripthtmlcssangularjs
Spearfisher
Spearfisher

Reputation: 8773

How to hide element while loading in Angular js

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?

Upvotes: 4

Views: 2819

Answers (1)

JME
JME

Reputation: 3642

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

Upvotes: 1

Related Questions