Angular.js: iOS 9 w / UIWebView（Safari / WKWebViewにはない）での場所の変更に関する無限のダイジェスト

作成日 2015年06月30日 · 154コメント · ソース: angular/angular.js

次の単純なHTMLは、この問題を示しています。

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-route.js"></script>
        <script>
            angular.module('fail', ['ngRoute'])
            .config(function($routeProvider) {
                $routeProvider
                .when('/a', {
                    template: '<a ng-href="#/b">a</a>'
                })
                .when('/b', {
                    template: '<a ng-href="#/a">b</a>'
                })
                .otherwise({
                    redirectTo: '/a'
                });
            });
        </script>
    </head>
    <body ng-app="fail">
        <div ng-view></div>
    </body>
</html>

これはほとんどのデバイスで期待どおりに実行されますが、iOS9では無限ダイジェスト例外がスローされます。
iOS9ベータ2を搭載したiPadAir2とiPad第4世代の両方で再現できます。
これはおそらくiOSの問題だと思いますが、それでも調査する価値があるかもしれません。

iOS $location bug

ソース

ttopalov

最も参考になるコメント

これについてもう少し詳しく説明します。場所に関してAngularに変更を加えました。
「ブラウザの更新」の部分で、$ rootScope。$ evalAsyncを$ rootScope。$ applyAsyncに変更しました。

2つの方法はまったく同じことをしているように見えます。実際の$ digestの実行を確認するまで、違いは明らかになりません。 AngularJSがダイジェストを実行すると、スコープツリーをウォークし、ダーティデータが生成されなくなるまで$ watch（）バインディングを実行します。このライフサイクル中に、$ applyAsync（）キューと$ evalAsync（）キューの両方がフラッシュされます。しかし、これは2つの非常に異なる場所で発生します。

$ applyAsync（）キューは、AngularJSがダーティデータのチェックを開始する前に、$ digestの先頭でのみフラッシュされます。そのため、$ applyAsync（）キューは、最大で$ digest中に1回フラッシュされ、$ digestが開始される前にキューに既にデータが入力されている場合にのみフラッシュされます。

一方、$ evalAsync（）キューは、$ digest内の「ダーティチェック」を実装するwhileループの先頭でフラッシュされます。これは、ダイジェスト中に$ evalAsync（）キューに追加された式は、同じダイジェスト内の後の時点で実行されることを意味します。

この違いをより具体的にするために、$ watch（）バインディング内から$ evalAsync（）によって追加された非同期式が同じダイジェストで実行されることを意味します。 $ watch（）バインディング内から$ applyAsync（）によって追加された非同期式は、後の時点（〜10ms）で実行されます。

これがすでにあなたの何人かを助けてくれることを願っています:-)。


// update browser
    $rootScope.$watch(function $locationWatch() {
      var oldUrl = trimEmptyHash($browser.url());
      var newUrl = trimEmptyHash($location.absUrl());
      var oldState = $browser.state();
      var currentReplace = $location.$$replace;
      var urlOrStateChanged = oldUrl !== newUrl ||
        ($location.$$html5 && $sniffer.history && oldState !== $location.$$state);

      if (initializing || urlOrStateChanged) {
        initializing = false;

        $rootScope.$applyAsync(function() {
          var newUrl = $location.absUrl();
          var defaultPrevented = $rootScope.$broadcast('$locationChangeStart', newUrl, oldUrl,
              $location.$$state, oldState).defaultPrevented;

          // if the location was changed by a `$locationChangeStart` handler then stop
          // processing this location change
          if ($location.absUrl() !== newUrl) return;

          if (defaultPrevented) {
            $location.$$parse(oldUrl);
            $location.$$state = oldState;
          } else {
            if (urlOrStateChanged) {
              setBrowserUrlWithFallback(newUrl, currentReplace,
                                        oldState === $location.$$state ? null : $location.$$state);
            }
            afterLocationChange(oldUrl, oldState);
          }
        });
      }

      $location.$$replace = false;

      // we don't need to return anything because $evalAsync will make the digest loop dirty when
      // there is a change
    });

raftheunis87 2015年08月13日

👍2

全てのコメント154件

私はiOS9で発生した同様の問題に遭遇しましたが、他のデバイスでは問題なく動作します。

cxm01 2015年07月01日

私は1.4.1 / ios9でsantaslowによって提供されたのと同じコードでこの問題を再現しました：

<!DOCTYPE html>
<html>
<head>
    <script src="../static/js/angular/angular.1.4.1.js"></script>
    <script src="../static/js/angular-route/angular-route.1.4.1.js"></script>
    <script>
        angular.module('fail', ['ngRoute'])
                .config(function ($routeProvider) {
                    $routeProvider
                            .when('/a', {
                                template: '<a ng-href="#/b">a</a>'
                            })
                            .when('/b', {
                                template: '<a ng-href="#/a">b</a>'
                            })
                            .otherwise({
                                redirectTo: '/a'
                            });
                }).factory('$exceptionHandler', ['$log', function($log) {
                    return function(exception, cause) {
                        var message = 'angularjs exception: '+exception.message+': caused by "' + cause+ '\njs stack:\n'+exception.stack;
                        $log.error(message);
                    };
                }]);
    </script>
</head>
<body ng-app="fail">
<div ng-view></div>
</body>
</html>

上記のコードは、デスクトップブラウザ、Android、およびiOS 8 Webビューで正常に実行されますが、iOS 9では、リンクをクリックすると例外がスローされます

2015-07-02 11:00:09 ... angularjs exception: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.1/$rootScope/infdig?p0=10&p1=%5B%5D: caused by "undefined
js stack:
file:///.../static/js/angular/angular.js:68:32
$digest<strong i="10">@file</strong>:///.../static/js/angular/angular.js:15705:35
$apply<strong i="11">@file</strong>:///.../static/js/angular/angular.js:15935:31
file:///.../static/js/angular/angular.js:12070:30
eventHandler<strong i="12">@file</strong>:///.../static/js/angular/angular.js:3264:25

cxm01 2015年07月02日

iOS 9 Beta3では再現できなくなりました。

ttopalov 2015年07月09日

iOS9パブリックベータ（13A4293g）でも同じエラーが発生します

aexei 2015年07月11日

私はiOS9ベータ3（13A4293g）で上記のコードを検証しましたが、もう例外はありません。ただし、ng-viewを使用するアプリは、iOS9ベータ3でinfdig例外をスローします。

cxm01 2015年07月13日

iOS9パブリックベータ（13A4293g）でも同じエラーが発生します

エラー：[$ rootScope：infdig ] 10回の$ digest（）反復に達しました。中絶！
ウォッチャーは過去5回の反復で解雇されました：[]
http://errors.angularjs.org/1.3.13/ $ rootScope / infdig？p0 = 10＆p1 =％5B％5D
file：///Users/mac5/Library/Developer/CoreSimulator/Devices/749DE7E3-D93F-47F9-A1FC-E3D54A1CCEEE/data/Containers/Bundle/Application/9B5EE368-F2A0-4C99-807B-EA17B2479E58/BAShops.app/www /lib/ionic/js/ionic.bundle.js:8762:32
$ dialog
$ apply @ file ：/// Users / mac5 / Library / Developer / CoreSimulator / Devices / 749DE7E3-D93F-47F9-A1FC-E3D54A1CCEEE / data / Containers / Bundle / Application / 9B5EE368-F2A0-4C99-807B-EA17B2479E58 / BAShops。 app / www / lib / ionic / js / ionic.bundle.js：23205：31
file：///Users/mac5/Library/Developer/CoreSimulator/Devices/749DE7E3-D93F-47F9-A1FC-E3D54A1CCEEE/data/Containers/Bundle/Application/9B5EE368-F2A0-4C99-807B-EA17B2479E58/BAShops.app/www /lib/ionic/js/ionic.bundle.js:54879:24
eventHandler @ file ：///Users/mac5/Library/Developer/CoreSimulator/Devices/749DE7E3-D93F-47F9-A1FC-E3D54A1CCEEE/data/Containers/Bundle/Application/9B5EE368-F2A0-4C99-807B-EA17B2479E58/BAShops.app /www/lib/ionic/js/ionic.bundle.js:11713:25
dispatchEvent @ [ネイティブコード]
triggerMouseEvent @ file ：///Users/mac5/Library/Developer/CoreSimulator/Devices/749DE7E3-D93F-47F9-A1FC-E3D54A1CCEEE/data/Containers/Bundle/Application/9B5EE368-F2A0-4C99-807B-EA17B2479E58/BAShops.app /www/lib/ionic/js/ionic.bundle.js:2863:20
tapClick @ file ：///Users/mac5/Library/Developer/CoreSimulator/Devices/749DE7E3-D93F-47F9-A1FC-E3D54A1CCEEE/data/Containers/Bundle/Application/9B5EE368-F2A0-4C99-807B-EA17B2479E58/BAShops.app /www/lib/ionic/js/ionic.bundle.js:2852:20
tapTouchEnd @ file ：///Users/mac5/Library/Developer/CoreSimulator/Devices/749DE7E3-D93F-47F9-A1FC-E3D54A1CCEEE/data/Containers/Bundle/Application/9B5EE368-F2A0-4C99-807B-EA17B2479E58/BAShops.app /www/lib/ionic/js/ionic.bundle.js:2975:13

arkomr 2015年07月13日

独自のAngularアプリケーションを使用したiOS9のパブリックベータ3でもこのエラーが発生します。 iOS8では発生しません。

epaga 2015年07月15日

回避策として、ng-viewとangular-route.jsを置き換える簡単なディレクティブを作成しました。このソリューションは私たち自身のアプリケーションでうまく機能し、すべてのinfdig例外はios9ベータ/ベータ3で消えました。以下は私たち自身のアプリケーション専用の簡略化されたコードであり、一般的な使用例は考慮されていません。他の人にこれを使用することはお勧めしません：

(function (window) {
    'use strict';

    var myApp = angular.module("myApp");
    var $route = {};

    // replace $routeProvider.when with the function below:
    window.routeWhen = function(path, route) {
        $route[path] = route;
    };

    myApp.directive("myView", ['$compile', '$controller', '$http', '$rootScope', function ($compile, $controller, $http, $rootScope) {

        return {
            priority: -400,
            link: function (scope, element) {
                var parentScope = scope;
                scope = null;

                window.updateView = function (path) {
                    location.hash = '#'+url;
                    if (scope) scope.$destroy();
                    scope = parentScope.$new();

                    var route = $route[path];

                    var linkView = function(html) {
                        element.html(html);
                        var link = $compile(element.contents());
                        var controller = $controller(route.controller, {$scope: scope});
                        element.data('$ngControllerController', controller);
                        element.children().data('$ngControllerController', controller);
                        link(scope);
                        scope.$emit('$viewContentLoaded');
                        if (!$rootScope.$$phase && !scope.$$phase) scope.$apply();
                    };
                    if (route.templateCache) linkView(route.templateCache)
                    else if (route.template) {
                        route.templateCache = document.getElementById(route.template).innerHTML;
                        linkView(route.templateCache)
                    }
                    else $http.get(route.templateUrl;).success(function(html) {
                        route.templateCache = html;
                        linkView(html);
                    });
                };
                //updateView(initialPath);
                // call updateView(path) to set location at other places of the app
            }
        };
    }]);

})(window)

cxm01 2015年07月15日

iOS 9 Beta 4をインストールしたばかりですが、同じ問題が発生します。他の誰か？

raftheunis87 2015年07月22日

iOS 9 Beta 3で見ましたが、iOS 9 Beta4でも見ています。

craig-at-rsg 2015年07月22日

aexei 2015年07月22日

ええ、角度のあるUIルーターでも同じ問題が発生しています。それまでの間、この問題の有効な回避策はありますか？

vincentdu101 2015年07月29日

最新のiOS9のuiWebViewで同じ問題が発生しています。

viattik 2015年07月31日

誰かがこの問題に関する更新を持っていますか？

raftheunis87 2015年08月03日

これはまだ問題です。再開

lgalfaso 2015年08月03日

iOSの問題のようです。これはWebkitのどこかで追跡されていますか？

Narretz 2015年08月04日

mike1e 2015年08月04日

RolfDeVries 2015年08月05日

こっちも一緒。私たちのCordovaアプリは、iPad SafariでWebとして実行している場合は正常に実行されますが、Cordovaアプリ（UIWebView）として実行している場合は無限のダイジェストが発生します。

borrull 2015年08月05日

@borrullとまったく同じ問題です！すでにWKWebViewで実験しており、問題は存在しません。ただし、ローカルファイルサービング（およびアプリケーションでローカルサーバーを実行したくない）とCookieが必要なため、WKWebViewを使用することはできません。そのため、iOS9のCordova / MobileSafariと組み合わせたUIWebViewで何かを行う必要があります。アプリケーションが別の場所に複数回（10回後に）移行したいので、現在Angularで$ locationWatchをデバッグしています。）ダイジェストエラーがスローされます。

raftheunis87 2015年08月05日

iOS9béta4でも同じ問題が発生します
角度のある無限の$ digestループ;（

axelsegers 2015年08月05日

+ 1、UIWebViewでのみ、WKWebViewではありませんが、cordovaアプリでのみUIWebViewを使用できます。

andyverbunt 2015年08月05日

laurentverbruggen 2015年08月05日

これがiOS固有の問題である場合は、Webkitの問題追跡システムで問題を開いてデモを提供してください。ここでの+1は、実際にはブラウザのバグのように聞こえるので、何も変更されない可能性があります。

Narretz 2015年08月05日

誰かがこのバグを調査のためにAppleに報告しましたか？

aexei 2015年08月06日

このバグをアップルに報告しました。しかし、バグに注意を向けるために、皆さんも同じことをする必要があるかもしれません。

axelsegers 2015年08月06日

+1できるようにリンクを教えていただけますか？

RolfDeVries 2015年08月06日

それはバグレポーターを介して私たちの個人的なアップルアカウントにあります..したがって、パブリックリンクはありません;（

axelsegers 2015年08月06日

それをopenradarに投稿し、rdar idを共有して、複製できるようにしてください。

epaga 2015年08月06日

iOS9béta5でも同じ：
モバイルサファリで動作します
ローカルファイルを提供できず、NSProtocolをサポートしていないため使用できないWKWebviewで動作します
UIWebViewでは機能しません

axelsegers 2015年08月07日

ここIOS9 Beta5でも同じです

mk2988 2015年08月07日

Appleにもバグを報告しました。 Open Radarのリンクは次のとおりです： https ： @santaslowに感謝し

borrull 2015年08月07日

同じXcodeプロジェクトのバージョン（@borrullから）を作成しましたが、ng-routeの代わりにui-routerを使用しています。まったく同じ問題。興味のある人のために、あなたはここでプロジェクトを見つけることができます： http ：

raftheunis87 2015年08月07日

このように問題も発生しています。角度が混在している場合、location。*プロパティがすぐに更新されないという問題を追跡することができました。 location.hashに値を割り当てようとして（位置情報サービスの背後で行われていることのように）、すぐにそれを読み戻そうとしても、値は変更されていません。 popstateイベントとhashchangedイベントにアタッチされたjqliteハンドラーの結果として、いくつかの副作用が発生しているようです。

コンピューターを使用しているときにサンプルをアップロードしてみます。

CleverCoder 2015年08月07日

abrahamrkj 2015年08月08日

@CleverCoderサンプルの更新はありますか？

raftheunis87 2015年08月10日

私は週末中ずっと拘束されていたので、私は午前中に再現ケースを終了する必要があります。ナッジをありがとう！ iOS 9がカウントダウンするにつれて、私たちはこれが解決されるのを見ることに既得権益を持っています。できるだけ早く何かをアップロードします。

CleverCoder 2015年08月10日

mk2988 2015年08月10日

ロケーションハッシュまたはhrefプロパティの設定がすぐに「適用」されない、根本的な原因であると私が信じていることを再現しました。
XCodeプロジェクトへのリンクは次のとおりです。
https://www.dropbox.com/s/2jkwv2thhm86nly/iOS%209%20Location%20Bug.zip?dl=0
ファイルにアクセスできない場合はお知らせください。

location.hashで結果の値を確認し、Safariをデバッグにアタッチします。 'popstate'および 'hashchange'イベントに基づくイベントの配管の結果として、変更を延期する何かがあるようです。

これがお役に立てば幸いです。

ショーン

CleverCoder 2015年08月10日

state.goを使用する代わりにwindow.location.hrefを使用しており、今のところ機能しているようです。バギーが少ない。

mike1e 2015年08月10日

location.hashの値は、runloopのスピン後に正しくなります。 Angularは、location.hashがsetTimeout（...、0）で取得するのを遅らせることで、この問題を簡単に回避できます。これはangular.js / src / ng /location.jsへの最大2つの変更になると思います。

hober 2015年08月10日

@hober次のような角度でタイムアウトを試しました：

// update $location when $browser url changes
    $browser.onUrlChange(function(newUrl, newState) {
      $rootScope.$evalAsync(function() {
        var oldUrl = $location.absUrl();
        var oldState = $location.$$state;
        var defaultPrevented;

        $location.$$parse(newUrl);
        $location.$$state = newState;

        defaultPrevented = $rootScope.$broadcast('$locationChangeStart', newUrl, oldUrl,
            newState, oldState).defaultPrevented;

        // if the location was changed by a `$locationChangeStart` handler then stop
        // processing this location change
        if ($location.absUrl() !== newUrl) return;

        if (defaultPrevented) {
          $location.$$parse(oldUrl);
          $location.$$state = oldState;
          setTimeout(function(){ setBrowserUrlWithFallback(oldUrl, false, oldState) }, 0);
        } else {
          initializing = false;
          afterLocationChange(oldUrl, oldState);
        }
      });
      if (!$rootScope.$$phase) $rootScope.$digest();
    });

そして

// update browser
    $rootScope.$watch(function $locationWatch() {
      var oldUrl = trimEmptyHash($browser.url());
      var newUrl = trimEmptyHash($location.absUrl());
      var oldState = $browser.state();
      var currentReplace = $location.$$replace;
      var urlOrStateChanged = oldUrl !== newUrl ||
        ($location.$$html5 && $sniffer.history && oldState !== $location.$$state);

      if (initializing || urlOrStateChanged) {
        initializing = false;

        $rootScope.$evalAsync(function() {
          var newUrl = $location.absUrl();
          var defaultPrevented = $rootScope.$broadcast('$locationChangeStart', newUrl, oldUrl,
              $location.$$state, oldState).defaultPrevented;

          // if the location was changed by a `$locationChangeStart` handler then stop
          // processing this location change
          if ($location.absUrl() !== newUrl) return;

          if (defaultPrevented) {
            $location.$$parse(oldUrl);
            $location.$$state = oldState;
          } else {
            if (urlOrStateChanged) {
              setTimeout(function(){ setBrowserUrlWithFallback(newUrl, currentReplace,
                  oldState === $location.$$state ? null : $location.$$state) }, 0);
            }
            afterLocationChange(oldUrl, oldState);
          }
        });
      }

      $location.$$replace = false;

      // we don't need to return anything because $evalAsync will make the digest loop dirty when
      // there is a change
    });

そこで、setBrowserUrlWithFallbackメソッドの周りにsetTimoutを追加しましたが、問題は解決しません。

raftheunis87 2015年08月11日

これは、Angularに依存しない縮小されたテストケースであり、回避策を示しています。 Angularで実際に回避策を実装する方法は私にはわかりません。 https://gist.github.com/hober/a29b6c28ac1744c800dd

hober 2015年08月11日

これがすでにあなたの何人かを助けてくれることを願っています:-)。


// update browser
    $rootScope.$watch(function $locationWatch() {
      var oldUrl = trimEmptyHash($browser.url());
      var newUrl = trimEmptyHash($location.absUrl());
      var oldState = $browser.state();
      var currentReplace = $location.$$replace;
      var urlOrStateChanged = oldUrl !== newUrl ||
        ($location.$$html5 && $sniffer.history && oldState !== $location.$$state);

      if (initializing || urlOrStateChanged) {
        initializing = false;

        $rootScope.$applyAsync(function() {
          var newUrl = $location.absUrl();
          var defaultPrevented = $rootScope.$broadcast('$locationChangeStart', newUrl, oldUrl,
              $location.$$state, oldState).defaultPrevented;

          // if the location was changed by a `$locationChangeStart` handler then stop
          // processing this location change
          if ($location.absUrl() !== newUrl) return;

          if (defaultPrevented) {
            $location.$$parse(oldUrl);
            $location.$$state = oldState;
          } else {
            if (urlOrStateChanged) {
              setBrowserUrlWithFallback(newUrl, currentReplace,
                                        oldState === $location.$$state ? null : $location.$$state);
            }
            afterLocationChange(oldUrl, oldState);
          }
        });
      }

      $location.$$replace = false;

      // we don't need to return anything because $evalAsync will make the digest loop dirty when
      // there is a change
    });

raftheunis87 2015年08月13日

👍2

別のアプローチがあります。私はAngularコードベースにそれほど精通していませんが、ロジックは合理的なようです。ブラウザのurl（...）関数は現在、正しいURLをすぐに返すlocation.hrefに依存しています。このメソッドは同じ実行ループで呼び出されるため、$ digest安定化サイクル内で、引き続き古いURLを取得します。このパッチは、「pendingHref」を利用して割り当てを追跡し、設定されている場合は代わりにその値を返します。値がlocation.hrefと整列すると、保留中の値がクリアされます。 URLの設定中に、url（）getが呼び出されない場合をキャッチするためにタイマーが0msに設定されます。完璧ではありませんが、ロジックは機能しているようです。これは主に、パフォーマンスの遅延を引き起こさない代替アプローチを検討することです。これはAngularタグv1.4.3に基づいています。

diff --git a/src/ng/browser.js b/src/ng/browser.js
index 928de95..3b9957e 100644
--- a/src/ng/browser.js
+++ b/src/ng/browser.js
@@ -87,7 +87,9 @@ function Browser(window, document, $log, $sniffer) {
   var cachedState, lastHistoryState,
       lastBrowserUrl = location.href,
       baseElement = document.find('base'),
-      reloadLocation = null;
+      reloadLocation = null,
+      pendingHref = null,
+      pendingHrefTimer = null;

   cacheState();
   lastHistoryState = cachedState;
@@ -124,6 +126,18 @@ function Browser(window, document, $log, $sniffer) {
     if (location !== window.location) location = window.location;
     if (history !== window.history) history = window.history;

+    // Schedule cleaning up pendingHref on the next run loop for setting URL. This is to handle
+    // the case where the browser doesn't update the location.* properties immediately
+    if (!pendingHrefTimer && pendingHref && url) {
+      pendingHrefTimer = setTimeout(function () {
+        if (location.href == pendingHref) {
+          console.log('Actual href updated... setting pendingHref to null from setTimeout');
+          pendingHref = null;
+        }
+        pendingHrefTimer = null;
+      }, 0);
+    }
+
     // setter
     if (url) {
       var sameState = lastHistoryState === state;
@@ -147,6 +161,7 @@ function Browser(window, document, $log, $sniffer) {
         // Do the assignment again so that those two variables are referentially identical.
         lastHistoryState = cachedState;
       } else {
+        pendingHref = url;
         if (!sameBase || reloadLocation) {
           reloadLocation = url;
         }
@@ -161,10 +176,22 @@ function Browser(window, document, $log, $sniffer) {
       return self;
     // getter
     } else {
+      var href = location.href.replace(/%27/g, "'");
+      if (pendingHref) {
+        //console.log('.. using pendingHref for url() return value');
+        href = pendingHref;
+      }
+
+      if (location.href == pendingHref) {
+        console.log('Actual href updated... setting pendingHref to null in getter');
+        pendingHref = null;
+      }
+
+      //var href = location.href.replace(/%27/g,"'");
       // - reloadLocation is needed as browsers don't allow to read out
       //   the new location.href if a reload happened.
       // - the replacement is a workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=407172
-      return reloadLocation || location.href.replace(/%27/g,"'");
+      return reloadLocation || href;
     }
   };

CleverCoder 2015年08月13日

解決策をありがとう@CleverCoder ！チャームのように機能するようです！：+1：

raftheunis87 2015年08月14日

@CleverCoder
これを使用してAngularチームにプルリクエストを実行するとよいでしょう。

viattik 2015年08月14日

@viattikバグはUIWebView（Apple）自体にあるので、AngularチームがiOS9上のUIWebViewの回避策を採用するのであれば、私はちょっと驚きます。しかし、あなたはいつでも試すことができます...

raftheunis87 2015年08月14日

@ raftheunis87
さまざまなブラウザに多くのバグがあり、Angularコードのそれらのバグに対する多くの回避策があります。
それらは公式にはUIWebViewをサポートしていませんが、多くのハイブリッドアプリが壊れ、Appleがそのバグを修正するまで、最新のiOSのハイブリッドアプリでAngularを使用することは不可能になります。そして、それは私が言うだろうかなり大きな問題です。
だから私はそれを試してみます。

viattik 2015年08月14日

@viattik私は完全に同意します。そしてところで：Appleは、UIWebViewのバグを修正する可能性は低いと私たちに伝えました。だから確かに：それを試してみてください;-)

raftheunis87 2015年08月14日

皆さん、これをWebkitのバグとして投稿できれば、理想的には再現ケースを使用して、WebKit側の連絡先のいくつかをフォローアップします。 https://bugs.webkit.org/

naomiblack 2015年08月14日

@naomiblack
Webkitのバグかどうかはわかりません。 iOS9のUIWebViewでのみ発生するためです。 iOS9のSafariは正常に動作します。

viattik 2015年08月14日

@ raftheunis87コードの提案に感謝し、完璧に機能しました

ajrmspwd 2015年08月14日

@ raftheunis87 @CleverCoderは、イオン角度を操作する方法ですか？もっと具体的にできますか？

abrahamrkj 2015年08月15日

@abrahamrkj私はイオンの経験がありません。しかし、イオンを使用する場合、角度のカスタマイズはありますか？そうでなければ、同じ修正がイオン角度で機能すると思います...

raftheunis87 2015年08月15日

@ raftheunis87https ：//github.com/driftyco/ionic/tree/master/jsこれは彼らが使用している角度です。

abrahamrkj 2015年08月15日

プルリクエストの@ CleverCoder + 1。 @viattikは、多くのハイブリッドアプリを壊してしまうため、これが重要な問題であることに同意します。

borrull 2015年08月17日

プルリクエストは近い将来に行われる可能性がありますが、私は他のコードベースほどAngularコードベースに近くないため、躊躇しています。私はすぐに解決策を再検討し、それを防弾にするように努めます。 window.locationオブジェクトのプロパティが「すぐに」変更されないのは奇妙に思えます。私が行ったテストでは、「popstate」および「hashchange」イベントフックが配置されていない限り、変更が保持されていることに気付き、延期された変更の原因は実際に何かをしているのではないかと思いました。そうでなければ..おそらくそれらのイベントのタイミングが変わった（私はそれを観察していたと思う）。
これから数日かけてこれを見ていきます。これ以上良いことがない場合は、もう少し深く掘り下げて、これまでに知っていることと、行動の変化に対処するのに最適な場所がないことを確認します。これが紛らわしい場合は申し訳ありません。それらのイベントに関して私がまだ完全に理解していない内部で起こっていることがたくさんあります。
乾杯！

CleverCoder 2015年08月17日

...そしてはい、 @ borrull 、私は同意します。 Appleがこれ以上変更を加えない場合、これは深刻な時限爆弾であり、実際に悪いプレスや指差しにつながります。私は回避策としてタイマーのファンではありませんが（これらの組み込みプロパティの周りのロジックフローを改善したいのですが）、一度設定された値の変更に依存できない場合は、どこに描画しますかライン？他に信頼できないプロパティはありますか？それは奇妙なものです。

CleverCoder 2015年08月17日

@CleverCoderただ感謝を言いたかっただけです、あなたのパッチは本当にその日を救いました！

tfujii 2015年08月18日

@CleverCoder与えられた回避策をありがとう。

私は、Angularからデコレータ機能を使用し、Angularソースにパッチを適用せずに提供されるソリューションを導き出しました。

cssuaを使用すると、このセットアップを特定の環境でのみ使用するように構成できます。

    app.config(['$provide', ($provide) => {
        $provide.decorator('$browser', ['$delegate', ($delegate) => {
            var origUrl = $delegate.url;

            var pendingHref = null;
            var pendingHrefTimer = null;

            var newUrl = function (url, replace, state) {

                if (url) {
                    // setter
                    var result = origUrl(url, replace, state);

                    if (window.location.href != url) {

                        if (pendingHref != url) {
                            pendingHref = url;

                            if (pendingHrefTimer) clearTimeout(pendingHrefTimer);

                            pendingHrefTimer = setTimeout(function () {
                                if (window.location.href == pendingHref) {
                                    pendingHref = null;
                                }
                                pendingHrefTimer = null;
                            }, 0);
                        }
                    }

                    return result;
                } else {
                    // getter
                    if (pendingHref == window.location.href) {
                        pendingHref = null;
                    }

                    return pendingHref || origUrl(url, replace, state);
                }
            };

            $delegate.url = newUrl;

            return $delegate;
        }]);
    }]);

realityfilter 2015年08月20日

👍1

@ CleverCoder ＃

jd-carroll 2015年08月20日

@ jd-carroll：それは本当に面白いです。少し遅れて、時間があるときにこれを再訪するかもしれません。かなり物でいっぱいです。これは、場所の遅延を引き起こしてはならない別の問題のように思われるため、より多くの謎を生み出します。*値の更新。

@realityfilter ：デコレータについておかしいと思います... Angularデコレータ機能を使用して何かを実装し終えたところです。いいね！

CleverCoder 2015年08月20日

やあみんな、
この修正により、修正が簡単なバグがコードに導入されたことを追加したかっただけです。

テンプレートには、href = "＃"とng-click = "someCall（）"を使用するアンカータグがありました。 hrefは、この修正を使用してサイトをindex.htmlに移動させていました。 hrefを削除すると、問題が修正されました。

jyc66 2015年08月20日

私たちのアプリは、Ionicの戻るボタンのナビゲーション中に壊れています。最初に新しいビューに移動し、次に部分的に古いビューに戻り、次にIOS9ベータの新しいビューに再び移動します。Ionicの解像度

ajaybeniwal 2015年08月21日

iOS9ベータ513A4325c、Angular 1.4.0（cordova-ios 3.9.1を使用）でも同じ問題が発生します。うまくいけば、根本的なUIWebViewのバグが修正されるでしょう！

aderowbotham 2015年08月31日

Angularv1.2.27でも同じ問題が発生しています

markoivanovski 2015年09月01日

私はそれを1.2.27リリースまでさかのぼりましたが、バグは以前の1.2.26リリースにはありません。

具体的には、このコミットが原因です。

damrbaby 2015年09月03日

@damrbaby私はそれと何か関係があるようです。

しかし、Mobile Safariで最新バージョンのangularで動作しているという事実は、iOS 9のuiWebViewで何かをしなければならないことを明らかにしています。したがって、Angularソースコードで行った変更は必ずしも悪いことではありません。

raftheunis87 2015年09月03日

@CleverCoder @realityfilter @ jyc66ありがとうと言いたかったのですが、あなたは私の一日を救ってくれました。

Kira2 2015年09月09日

iOS9 GMシードにはまだ問題がありますので、アプリを最新の状態にしてください！

markoivanovski 2015年09月09日

この問題はiOS9GM（13A340）にもまだ存在していることを確認できます

richardbrammer 2015年09月10日

つまり、これはAppleが何かを壊したことを意味し、アプリがクラッシュしないように、アプリを再度更新する必要があります（そのうちのいくつかは、数か月または1年以上変更されていません）。理にかなっています:(。私はむしろAppleにiOS9のローンチのためにそれを修正してもらいたい。古いアプリで最新のAngularバージョンに行くことは他のいくつかのものも壊してしまうだろう。

iOS9で問題が発生しているフレームワークはAngularだけだと思いますか？

Martinspire 2015年09月10日

そのため、Ionicチームの@ adamdbradley 、 @ perrygovier 、および@mhartingtonは、IonicおよびプレーンなAngularアプリでも機能する修正に一日中取り組んでいます。目標は、Angularの変更を必要としないドロップイン修正であり、（うまくいけば）ほとんどの1.2以降のAngularバージョンで機能します。

これは、このパッチを適用することで$browserを装飾および修正する現在のバンドルソリューションです。注：これはAngular 1.4.3に基づいており、Angular本体のbrowser.js 「修正付きクローン」のようなものです： https ：

また、CDNにパッチを配置しました。 CDNファイルを本番環境に使用することはお勧めしません。CDNファイルはそこにあるだけなので、今すぐテストする方が簡単です。

テストするには、次のスクリプトタグをangularまたはionic.bundle.jsファイルの下に配置します。

<script src="https://code.ionicframework.com/patch/ios9-$browser-patch.js"></script>

また、現在、iOS9で実行しているかどうかに関係なく、パッチが適用されます。これはまもなく修正され、iOS 9UIWebViewでのみ実行されるようになります。

ここで対応するIonicの問題に従ってください： https ：

mlynch 2015年09月10日

こんにちは、みんな、

UI-srefは魅力のように機能しますが、$ state.goは戻るボタンのアニメーションを壊します
この修正を適用した後でも、ページが大きくちらつきます。

よろしく、
アジャイシン

6:23の木、2015年9月10日には、最大リンチ[email protected]は書きました：

したがって、 @ adamdbradley https://github.com/adamdbradley、@ perrygovier
https://github.com/perrygovier 、および@mhartington
Ionicチームのhttps://github.com/mhartingtonが機能しています
IonicおよびプレーンなAngularアプリで機能する修正を1日中
上手。目標は、変更を必要としないドロップイン修正になることです
Angularであり、（うまくいけば）ほとんどの1.2以降のAngularバージョンで機能します。
これは、$ browserを装飾および修正する現在のバンドルソリューションです。
このパッチを適用する
https://github.com/angular/angular.js/issues/12241#issuecomment-130744518 。
注：これはAngular 1.4.3に基づいており、
Angular本体のbrowser.js：
https://github.com/driftyco/ionic/blob/ios9-patch/js/angular/service/decorators/ios9-browser-fix.js
また、CDNにパッチを配置しました。 CDNファイルの使用はお勧めしません
本番環境では、そこにしか存在しないため、今すぐテストする方が簡単です。
それをテストして、どうなるか教えてください、ありがとう。
テストするには、このスクリプトタグをAngularまたは
ionic.bundle.jsファイル：

Angular.js: iOS 9 w / UIWebView（Safari / WKWebViewにはない）での場所の変更に関する無限のダイジェスト

最も参考になるコメント

全てのコメント154件

関連する問題