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

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

1 个答案: