javascript - How to hide element while loading in Angular js -

javascript - How to hide element while loading in Angular js -

i have defined error banner in angular app supposed visible when error event triggered , there supposed hidden when page loads.

here 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, wrong happend' } $scope.$on('error', function(event, data) { self.error.show = true; self.error.message = data; }) }

my problem while angular loading, banner visible {{ root.error.message }} error message. have tried using ng-cloak (body(ng-cloak)) , ng-init hide not working.

i believe can tweak css play display properties quite messy.

what mutual best practices solve this?

as per angularjs website (https://docs.angularjs.org/api/ng/directive/ngcloak) solution next css:

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

javascript html css angularjs