Как скрыть элемент во время загрузки в Angular js

Question

Я определил баннер ошибок в моем угловом приложении, который должен быть видимым только при срабатывании события ошибки и там он должен быть скрыт при загрузке страницы.

Вот мой нефрит код:

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

Мой контроллер

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

Моя проблема в то время как угловатый загружается, баннер виден с {{ root.error.message }} как сообщение об ошибке. Я попытался использовать ng-cloak (body(ng-cloak)) и ng-init, чтобы скрыть его, но он не работает.

Я считаю, что могу настроить CSS, чтобы играть с свойствами экрана, но это было бы довольно грязно.

Каковы общие рекомендации по его устранению?

Answer 1

В соответствии с веб-сайта AngularJS (https://docs.angularjs.org/api/ng/directive/ngCloak) решение следующих CSS:

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