如何在Angular js中加载时隐藏元素

Question

我在我的 Angular 应用程序中定义了一个错误横幅，它应该只在触发错误事件时才可见，并且应该在页面加载时隐藏。

这是我的玉码：

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

我的问题是在加载 Angular 时，横幅显示为 {{ 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;
}