ionic ng-show 在浏览器中工作，但不在 android/ios 上

Posted 2023-03-12

【中文标题】ionic ng-show 在浏览器中工作，但不在 android/ios 上

【英文标题】：ionic ng-show working in browser but not on android/ios

【发布时间】：2015-04-24 12:54:33

【问题描述】：

我遇到了一个我无法解决的烦人问题，此代码在浏览器中完美运行，但在 android/ios 设备上却不行：

<ion-view style="" title="Dettaglio">
<ion-content class="has-header" padding="true">
    <div style="" class="list card">
        <div class="item item-divider" ng-show="conditions">conditions.nome conditions.cognome</div>
        <div class="item item-divider" ng-hide="conditions">Errore!!</div>
        <div class="item item-body">
            <div style="" ng-show="conditions">
                <p>
                   Residuo: conditions.residuo
                </p>
            </div>
            <div style="" ng-hide="conditions">
                <p>
                   Utente non registrato o codice fiscale errato
                </p>
            </div>
        </div>
    </div>
    <div style="display: inline-block; width: 300px; height: 17px;" class="spacer"></div>
    <div style="" class="list card" ng-show="conditions">
        <div class="item item-divider">Note</div>
        <div class="item item-body">
            <div style="">
                <p>
                    conditions.note
                </p>
            </div>
        </div>
    </div>
</ion-content>

在 Windows 浏览器中测试应用程序时，ng-hide/ng-show 会按预期工作隐藏或显示 div，但是一旦我在 android/ios 设备上获取应用程序，无论如何都会显示每个 div。 我对角度/离子有点陌生，但我不明白为什么 ng-show 指令在浏览器中有效，但在设备上无效。

提前致谢

【问题讨论】：

您确定要在您的应用中打包所有依赖项，即角度、离子等吗？

【参考方案1】：

我在浏览器和我的 Android 手机上都遇到了这个问题。这是由 Cordova 的安全性最近升级以及需要更好的“内容安全策略”引起的。

我通过在 index.html 中添加这一行来修复它：

<meta http-equiv="Content-Security-Policy" content="default-src...

我添加了：

'unsafe-inline' 'unsafe-eval'

【参考方案2】：

我也遇到过类似的问题。

我通过检查 Safari DevTools（针对 iOS 模拟器运行）中 [ng-hide=""] 元素的计算样式来解决我的问题，发现 .ng-hide display: none!important 规则没有被创建。

我的解决方法是将该规则添加到我自己的样式表中。