样式表未在 Ionic Angular 项目中加载答案

【问题标题】：Stylesheet not loading in Ionic Angular project样式表未在 Ionic Angular 项目中加载
【发布时间】：2016-02-29 08:43:48
【问题描述】：

我正在使用 Ionic 和 Angular 构建一个页面。如您所见，我将样式表包含在顶部，但是当页面加载时，样式完全混乱，直到我刷新页面。我不确定我做错了什么。提前致谢。

<link rel="stylesheet" type="text/css" href="css/event-nba.css">

<div ng-repeat="events in eventsList" class="events-bg">
  <a>
    <div class="event-box" ng-style="{'background-image':'url({{events.backgroundImage}})'}">

      <div class="nba-event-team">
        <span><img class="logos logo-margin" src="{{events.logo1}}"></span>
        <span><img class="logos" src="{{events.logo2}}"></span>
      </div>
      <div class="nba-event-team">
        <span class="team">{{events.eventDate}}</span>
      </div>
      <div class="nba-event-team">
        <span class="team">{{events.eventLocation}}</span>
      </div>
      <div class="nba-event-team">
        <img class="network-logo" src="{{events.networkLogo}}"></img>
      </div>
      <div class="nba-event-team">
        <button class="button button-assertive bth-red">
          TICKETS
        </button>
      </div>

    </div>

    <div class="preview-box">
    <span class="preview-text">{{events.eventPreview}}</span>
    </div>

    <div class="gear-title-box">
    <span class="gear-title-text">PICK UP GEAR FOR THE GAME</span>
    </div>

<div class="row">
  <div class="col col-45 card card-margin  home-product-border">
    <a href="#/tab/product-jacket">
      <div class="item item-body">
        <img class="full-image" src="img/nikesweatshirt200.png">
        <p class="shop-product-box-text-margin">
          Clothing
        </p>
        <h3 class="shop-product-box-text-margin">Nike Jacket <br>Elite Sports - Men's $79.99</h3>
        </span>
        <span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
        </h3></span>
      </div>
    </a>
  </div>

  <div class="col col-45 card card-margin  home-product-border">
    <a href="#/tab/product">
      <div class="item item-body">
        <img class="full-image" src="img/kobe xi.jpeg">
        <p class="shop-product-box-text-margin">
          Shoes
        </p>
        <h3 class="shop-product-box-text-margin">Nike Kobe 11 <br>Elite Low - Men's $199.99</h3>
        </span>
        <span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
        </h3></span>
      </div>
    </a>
  </div>
</div>
<div class="row">
  <div class="col col-45 card card-margin home-product-border">
    <a href="#/tab/product-uptime">
      <div class="item item-body">
        <img class="full-image" src="img/uptimebottle.png">
        <p class="shop-product-box-text-margin">
          Sport Supplements
        </p>
        <h3 class="shop-product-box-text-margin">UPTIME Energy <br>Original $4.39</h3>
        </span>
          <span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
          </h3></span>
      </div>
    </a>
  </div>

  <div class="col col-45 card card-margin home-product-border">
    <a href="#/tab/product-nba">
      <div class="item item-body">
        <img class="full-image" src="img/lavinjersey.jpeg">
        <p class="shop-product-box-text-margin">
          Clothing
        </p>
        <h3 class="shop-product-box-text-margin">Lavine Jersery <br>NBA Black - Men's $99.99</h3>
        </span>
          <span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
          </h3></span>
      </div>
    </a>
  </div>
</div>

</a>

【问题讨论】：

很遗憾这不起作用。
显示 index.html 代码
确保您的 html 都是有效的。我看到<a> 标签包含了大部分内容，甚至可能没有在正确的位置关闭。它还将<a> 放在无效的<a> 中
@charlietfl 我认为它与ng-style 解析问题有关..
控制台的错误是关于找不到图片的404错误，但是刷新后就全部消失了。

标签： javascript html css angularjs ionic-framework

【解决方案1】：

所以我找到了答案。该样式表使用了前一页中的一些类名，并且该样式表对这些类具有不同的 css。在加载此页面之前没有转储类，因此继承了其他样式。

【讨论】：