Question

当通过IOS上的PhoneGap 2.7.0中的InAppBrowser访问我使用AngularJS 1.2.0rc1构建的网站时，屏幕上的ng-show闪烁内容。

<form method="POST" action="" name="manualEntryForm" class="form-inline">
  <div ng-show="showErrors && !manualEntryForm.$valid" class="errorMsg ng-hide">
    One or more of the following fields are required:
    <span ng-show="manualEntryForm.month.$error.required || manualEntryForm.day.$error.required || manualEntryForm.year.$error.required" class="ng-hide">Date needs to be present</span>
    ...
  </div>
  ...
</form>

如果我将showErrors默认为false或更严格地测试它（showErrors === true）并不重要，那将显示错误内容块并显示相关的实际错误消息（{{1 }}）。

我很难过如何解决这个问题。我们是否应该在ng-show中使用Angular Form Validation？为什么它只会导致IOS / Phonegap InAppBrowser出现问题？

Answer 1

我遇到了同样的问题。 ng-cloak没有解决问题，所以为我解决问题的是添加

class="ng-hide"

使用ng-show属性的每个元素，现在它不会在ios上闪现内容。

Answer 2

尝试使用ng-cloak在编译期间隐藏元素：

http://docs.angularjs.org/api/ng.directive:ngCloak

可能在AngularJS编译器有时间运行之前出现。它可能只在iOS / Phonegap中显示，因为UIWebView中的webkit浏览器远不及Mobile Safari，更不用说桌面浏览器了。

Answer 3

作为一种解决方法，我最终删除了ng-show，而是添加了ng-class =“{hidden：myCondition}”，然后定义了.hidden {display：none;在CSS中。这消除了闪烁。

PhoneGap + Angular + IOS = ng-show闪烁屏幕上的内容

3 个答案: