如何在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; 
    }) 
} 

我的問題是當角加載，旗幟是{{ 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; 
}