角度的CSS無法正確加載

Question

我在加載頁面時以圖片為背景。 在應用程序首次啟動時，會彈出ons對話框，並詢問用戶一些信息。 當它彈出時，似乎后台css后面的頁面每次都無法正確加載。

有時背景圖片（由於ons對話框不是全屏顯示而可見）可以正確加載。 有時它會以全尺寸加載圖像，並且不會根據我的CSS重新調整尺寸。

我的ons頁面的CSS（在彈出窗口之后）：

.details-content{
    background-image: url('images/bg_beer.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

顯示我的對話框的代碼：

ons.ready(function() { $scope.show('welcomePopup.html'); });

非常感謝您對為什么在解雇ons.ready（）時無法總是完成我的css的任何幫助，修復程序或解決方法。

編輯1：

角度控制器：

app.controller('homeCon', function($http, $scope, $compile, $sce, $window, filterFilter, $timeout){

            document.addEventListener("show", function(event){
                                      if (event.target.id == "myMainPage") {

                                      $scope.show('welcomePopup.html');
                                      }
                                      },false);
...
...
};

打開頁面的HTML：

.details-content{
    background-image: url('images/bg_beer.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover; }
     </style>

<ons-page class="transparent" ng-controller="homeCon" id="myMainPage"> <ons-toolbar modifier="transparent">
    <div class="right">
      <ons-toolbar-button><ons-icon icon="ion-ios-location" style="color: white; font-size: 28px;"></ons-icon></ons-toolbar-button>
    </div>
    <div class="left">
      <ons-toolbar-button ng-click="menu.toggle()"><ons-icon icon="fa-bars" style="color: white; font-size: 28px;" fixed-width="false"></ons-icon></ons-toolbar-button>
    </div>   </ons-toolbar> <div> <div class="details-content glass">
      <div class="welcome" style="top:30%">
      <img src="images/bm_logo.png" width="66%">
      </br>
      <div ng-view>
          <ons-button modifier="quiet" style="color:white" ng-click="openFB()"><i class="fa fa-facebook-square fa-3x"></i></ons-button>
          <ons-button modifier="quiet" style="color:white" ng-click="openInsta()"><i class="fa fa-instagram fa-3x"></i></ons-button>
          <ons-button modifier="quiet" style="color:white" ng-click="openTwitter()"><i class="fa fa-twitter-square fa-3x"></i></ons-button>
      </div>
    </div>   </div> <div>

</ons-page>

Answer 1

我不確定CSS為什么不能保持一致。 可能是精靈的渲染方式，或者是附加到DOM並繪制精靈的時序問題。 試試這個，看看會發生什么，我很好奇（JS不是Angular-對不起）：

document.addEventListener("init", function(event){
    if (event.target.id == "myMainPage") { 
        $scope.show('welcomePopup.html');
      } 
},false);

基本上，只有在頁面被加載和附加后才會觸發，因此希望CSS是最終的，然后彈出窗口。