Reputation: 13
i'm facing an annoying issue that i'm not able to solve, this code works perfectly in the browser but not on the android/ios devices:
<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>
While testing the app in the Windows browser the ng-hide/ng-show work as intended hiding or showing the divs, but once i get the app on the android/ios devices each div is being displayed no matter what. i'm kinda new to angular/ionic but i can't understand why the ng-show directive is working in the browser but not on the devices.
Thanks in advance
Upvotes: 1
Views: 1275
Reputation: 451
I had this problem in both the browser and my Android phone. It was caused by a recent upgrade in Cordova's security, and the need for a better "Content-Security-Policy".
I fixed it by adding to this line in index.html:
<meta http-equiv="Content-Security-Policy" content="default-src...
I added in:
'unsafe-inline' 'unsafe-eval'
Upvotes: 1
Reputation: 4196
I had a similar problem.
I fixed my case by inspecting the computed styles of the [ng-hide=""] element in Safari DevTools (running against the iOS simulator) to find that the .ng-hide { display: none!important }
rule was not being created.
My workaround has been to add that rule to my own stylesheet.
Upvotes: 0