离子 - 在另一个视图上刷新时不应用 CSS答案

【问题标题】：Ionic - CSS is not applied when refreshing on another view离子 - 在另一个视图上刷新时不应用 CSS
【发布时间】：2015-06-22 06:24:26
【问题描述】：

我目前正在开发我的第一个 Ionic 应用程序，并且是第一次使用 Angular。

我正在使用pie-chart library 在应用程序的仪表板上显示图表。如果我在仪表板上刷新并且看起来像这样，这会很好地工作：

但是，如果我导航到另一个选项卡，比如说服务器选项卡，然后在那里刷新，宽度和高度不会应用于仪表板上的图表。相反，它们使用标准宽度和高度（500h x 900w 而不是 100h x 100w）呈现。（见 imgur 上的第二张图片）。如果我再次在仪表板上刷新，它们将正常呈现。

我浏览了库的源代码，看到在dashboard上刷新时，element[0].parentElement.offsetWidth等于100，但是如果我在另一个视图上刷新时，它是0，所以默认值被使用。看起来饼图指令在另一个视图上时无法访问父级。

这里是使用的 HTML 和 CSS：

HTML

<div class="pieChart">
    <pie-chart data="server.chartData.cpu" options="chartOptions"></pie-chart>
</div>

CSS

.pieChart {
    height: 100px;
    width: 100px;
    float: left;
}

我花了几个小时试图找到答案，但我什至不确定我到底需要搜索什么。我想出的唯一解决方案是更改 pie-chart.js 中的默认值，我不想这样做。

编辑

该应用程序是开源的，您可以在我的存储库中找到完整的代码：https://github.com/AndreasGassmann/cloudatcostapp

【问题讨论】：

【解决方案1】：

经过数小时的研究，我终于找到了问题的原因。

有两种不同的行为导致该问题：

Ionic 缓存多达 10 个视图以提高性能。这意味着当您从一个选项卡切换到另一个选项卡时，第一个选项卡仍保留在 DOM 中，因此可以更快地加载。但是，似乎 CSS 样式不适用于不可见的视图。这意味着此时具有.pieChart 类的div 的实际高度和宽度为0。我认为这类似于设置元素的display: none 属性。 (A blogpost explaining the issue with jquery)
每当饼图更新时，它都会将其大小设置为父元素的宽度和高度。我想这样做是为了在您调整窗口大小并刷新数据后调整图表大小。

这两件事显然不能很好地结合在一起。由于 Ionic 缓存了仪表板视图，<pie-chart></pie-chart> 元素仍在 DOM 中，因此它会立即尝试重新渲染。但是由于样式没有应用到父 div，它只会得到宽度和高度 0 并回退到使用默认值。

在普通网站中，视图通常不会被缓存。这意味着当您刷新时，DOM 中不存在<pie-chart></pie-chart> 元素，因此它根本不会尝试渲染。只有在您导航回视图并再次加载元素后，它才会尝试渲染和读取其父级的尺寸。（这会起作用，因为所有样式都已应用）。

我还没有找到一种方法来告诉一个元素“保持渲染”，即使它不是活动视图。这意味着有 2 个选项可以解决这个问题（除了更改饼图库的工作方式）：

【讨论】：

【解决方案2】：

强制我假设的样式：

.pieChart {
    height: 100px !important;
    width: 100px !important;
    float: left !important;
}

【讨论】：