Angular.js: UIWebView가있는 iOS 9에서 위치 변경에 대한 무한 다이제스트 (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>

이것은 대부분의 장치에서 예상대로 실행되지만 iOS 9에서는 무한 다이제스트 예외가 발생합니다.
iOS 9 베타 2로 iPad Air 2와 iPad 4 세대 모두에서 재현 할 수 있습니다.
iOS의 문제 일 수 있지만 여전히 조사 할 가치가있을 수 있습니다.

iOS $location bug

출처

ttopalov

가장 유용한 댓글

이것에 대해 조금 더 설명합니다. 위치와 관련하여 Angular를 변경했습니다.
"업데이트 브라우저"부분에서 $ rootScope. $ evalAsync를 $ rootScope. $ applyAsync로 변경했습니다.

두 가지 방법은 똑같은 일을하는 것처럼 보입니다. 실제 $ digest 실행을 볼 때까지 차이가 분명하지 않습니다. AngularJS가 다이제스트를 실행할 때 더 이상 더티 데이터가 생성되지 않을 때까지 범위 트리를 탐색하고 $ watch () 바인딩을 실행합니다. 이 수명주기 동안 $ applyAsync () 큐와 $ evalAsync () 큐가 모두 플러시됩니다. 그러나 이것은 매우 다른 두 곳에서 발생합니다.

$ applyAsync () 큐는 AngularJS가 더티 데이터 검사를 시작하기 전에 $ digest의 맨 위에서 만 플러시됩니다. 따라서 $ applyAsync () 큐는 $ digest 동안 최대 한 번 플러시되며 $ digest가 시작되기 전에 큐가 이미 채워진 경우에만 플러시됩니다.

반면에 $ evalAsync () 큐는 $ digest 내부의 "dirty check"를 구현하는 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 댓글

iOS 9에서 발생한 유사한 문제를 만났지만 다른 장치에서는 정상적으로 실행됩니다.

cxm01 에 2015년 07월 01일

1.4.1 / ios 9에서 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 webview에서 정상적으로 실행되지만 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 베타 3에서 재현 할 수 없습니다.

ttopalov 에 2015년 07월 09일

ios9 공개 베타 (13A4293g)에서 동일한 오류가 발생합니다.

aexei 에 2015년 07월 11일

위의 코드를 iOS 9 베타 3 (13A4293g)에서 확인했는데 더 이상 예외는 아닙니다. 그러나 ng-view를 사용하는 앱은 여전히 ios 9 베타 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
$ digest @ 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 : 22980 : 35
$ 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 애플리케이션이있는 iOS 9의 공개 베타 3에서도이 오류가 발생합니다. iOS 8에서는 발생하지 않습니다.

epaga 에 2015년 07월 15일

해결 방법으로 ng-view 및 angular-route.js를 대체하는 간단한 지시문을 작성했습니다. 솔루션은 우리 자신의 응용 프로그램에서 잘 작동했으며 모든 infdig 예외는 ios 9 베타 / 베타 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 베타 4를 설치했지만 여전히 동일한 문제가 있습니다. 다른 사람?

raftheunis87 에 2015년 07월 22일

iOS 9 베타 3에서 봤지만 여전히 iOS 9 베타 4에서보고 있습니다.

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 문제인 것 같습니다. 이것은 웹킷에서 어딘가에 추적됩니까?

Narretz 에 2015년 08월 04일

mike1e 에 2015년 08월 04일

RolfDeVries 에 2015년 08월 05일

여기도 마찬가지입니다. Cordova 앱은 iPad Safari에서 웹으로 실행되는 경우 정상적으로 실행되지만 Cordova 앱 (UIWebView)으로 실행되는 경우 무한 다이제스트가 발생합니다.

borrull 에 2015년 08월 05일

@borrull 과 똑같은 문제! 이미 WKWebView로 실험했으며 문제가 존재하지 않습니다. 그러나 우리는 로컬 파일 서빙 (그리고 우리 애플리케이션에서 로컬 서버를 실행하고 싶지 않음)과 쿠키가 필요하기 때문에 WKWebView를 사용할 수 없습니다. 따라서 iOS 9의 Cordova / Mobile Safari와 함께 UIWebView로 뭔가를해야합니다. 저는 현재 Angular에서 $ locationWatch를 디버깅하고 있습니다. 응용 프로그램이 여러 번 다른 위치로 전환 한 다음 (10 번 후) ) 다이제스트 오류가 발생합니다.

raftheunis87 에 2015년 08월 05일

iOS9 béta4에서 동일한 문제
각도 무한 $ digest 루프; (

axelsegers 에 2015년 08월 05일

+1, WKWebView가 아닌 UIWebView에서만 가능하지만 Cordova 앱에서만 UIWebView를 사용할 수 있습니다.

andyverbunt 에 2015년 08월 05일

laurentverbruggen 에 2015년 08월 05일

이것이 iOS 특정 문제인 경우 웹킷 문제 추적기에서 문제를 열고 데모를 제공하십시오! +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일

iOS9 béta 5에서 동일 :
모바일 사파리에서 작동
로컬 파일을 제공 할 수없고 NSProtocol을 지원하지 않기 때문에 사용할 수없는 WKWebview에서 작동합니다.
UIWebView에서 작동하지 않습니다.

axelsegers 에 2015년 08월 07일

IOS 9 베타 5에서도 마찬가지입니다.

mk2988 에 2015년 08월 07일

Apple에도 버그를 신고했습니다. Open Radar 링크 : https://openradar.appspot.com/22186109 (이는 게으른 사람들이 버그를 신고하는 데 도움이 될 것입니다). 버그 문구 / 설명을 개선 할 수 있으면 의견을 남겨주세요 ;-) Xcode 프로젝트를 다운로드하여 Open Radar 티켓에 버그 신고와 함께 첨부 할 수 있습니다 (OP의 JS에 대해 @santaslow 에게 감사드립니다)

borrull 에 2015년 08월 07일

@borrull에서 동일한 Xcode 프로젝트 버전을 만들었지 만 ng-route 대신 ui-router를 사용했습니다. 정확히 같은 문제입니다. 관심있는 사람들은 여기에서 프로젝트를 찾을 수 있습니다. http://s000.tinyupload.com/index.php?file_id=87281871603760127355

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일

runloop가 회전 한 후에 location.hash의 값이 정확합니다. Angular는 setTimeout (..., 0)에서 location.hash 가져 오기를 지연하여이 문제를 쉽게 해결할 수 있습니다. 나는 이것이 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일

뿡 빵뀨
앵귤러 팀에 풀 리퀘스트를하면 좋을 것입니다.

viattik 에 2015년 08월 14일

@viattik 버그가 UIWebView (Apple) 자체에 있기 때문에 각도 팀이 iOS9의 UIWebView에 대한 해결 방법을 채택한다면 저를 놀라게 할 것입니다. 하지만 항상 시도 할 수 있습니다 ...

raftheunis87 에 2015년 08월 14일

안녕하세요.
다른 브라우저에는 많은 버그가 있으며 각도 코드의 버그에 대한 많은 해결 방법이 있습니다.
공식적으로 UIWebView를 지원하지는 않지만 많은 하이브리드 앱이 손상 될 것이며 Apple이 버그를 수정할 때까지 최신 iOS의 하이브리드 앱에서 앵귤러를 사용하는 것은 불가능할 것입니다. 그리고 그것은 제가 말하고 싶은 꽤 큰 문제입니다.
그래서 나는 그것을 시도 할 것입니다.

viattik 에 2015년 08월 14일

@viattik 나는 전적으로 동의합니다. 그리고 btw : Apple은 UIWebView 버그를 수정할 가능성이 낮다고 우리에게 전달했습니다. 그래서 실제로 : 시도해보십시오 ;-)

raftheunis87 에 2015년 08월 14일

여러분, 이상적으로는 재현 사례와 함께 이것을 웹킷 버그로 게시 할 수 있다면 WebKit 측의 일부 연락처에 대해 후속 조치를 취할 것입니다. https://bugs.webkit.org/

naomiblack 에 2015년 08월 14일

뿡 빵뀨
웹킷 버그인지 확실하지 않습니다. iOS9의 UIWebView에서만 발생합니다. iOS9의 Safari는 정상적으로 작동합니다.

viattik 에 2015년 08월 14일

@ raftheunis87 귀하의 코드 제안에 감사 드리며 완벽하게 작동했습니다.

ajrmspwd 에 2015년 08월 14일

@ raftheunis87 @CleverCoder 는 ionic-angular로 작업하는 방법입니까? 더 자세하게 얘기해 주 시겠어요?

abrahamrkj 에 2015년 08월 15일

@abrahamrkj 나는 이온에 대한 경험이 없습니다. 그러나 ionic을 사용할 때 사용자 정의가 각도에 있습니까? 그렇지 않으면 동일한 수정이 이온 각도에서도 작동한다고 말할 것입니다 ...

raftheunis87 에 2015년 08월 15일

@ raftheunis87 https://github.com/driftyco/ionic/tree/master/js 이것은 그들이 사용하는 각도입니다.

abrahamrkj 에 2015년 08월 15일

pull 요청의 경우 @CleverCoder +1. 나는 이것이 많은 하이브리드 앱을 망칠 것이기 때문에 이것이 중요한 문제라는

borrull 에 2015년 08월 17일

나는 다른 사람들처럼 Angular 코드베이스에 가깝지 않기 때문에 주저하지만 풀 요청이 가까운 미래에있을 수 있습니다. 곧 솔루션을 다시 방문하여 방탄으로 만들 것입니다. window.location 객체의 속성이 '즉시'변경되지 않는 것이 이상하게 보입니다. 내가 한 테스트에서 'popstate'및 'hashchange'이벤트 후크가 제자리에 있지 않는 한 변경 사항이 유지되는 것을 확인하여 지연된 변경의 원인이 실제로 뭔가를 할 수 있다고 생각하게되었습니다. else .. 아마도 그 사건의 타이밍이 바뀌었을 것입니다 (나는 그것이 내가 관찰 한 것이라고 생각합니다).
나는 앞으로 며칠 동안 이것을 지켜 볼 것이며, 더 나은 표면이 없다면, 지금까지 내가 알고있는 것을 확인하기 위해 조금 더 깊이 파고들 것이며, 행동의 변화를 다루기에 더 좋은 곳이 없다는 것을 확인할 것입니다. 혼란 스러우면 죄송합니다. 그 사건과 관련하여 아직 완전히 이해하지 못하는 많은 일이 있습니다.
건배!

CleverCoder 에 2015년 08월 17일

... 예, @borrull , 동의합니다. Apple이 더 이상 변경하지 않으면 이것은 심각한 똑딱 거리는 시한 폭탄이며 실제로 잘못된 누르기 및 손가락 포인팅으로 이어질 것입니다. 나는 임시 해결책으로서 타이머의 팬은 아니지만 (차라리 이러한 내장 속성에 대한 로직 흐름을 개선하고 싶습니다), 일단 설정 한 값 변경에 의존 할 수 없다면, 우리는 어디에 그릴까요? 선? 우리가 신뢰할 수없는 다른 속성은 무엇입니까? 이상한 것입니다.

CleverCoder 에 2015년 08월 17일

@CleverCoder 그냥 감사의 말을 전하고 싶었습니다. 패치가 정말 하루를 구했습니다!

tfujii 에 2015년 08월 18일

@CleverCoder 주어진 해결 방법에 감사드립니다.

나는 앵귤러에서 데코레이터 기능을 사용하고 앵귤러 소스를 패치하지 않고 제공되는 솔루션을 파생했습니다.

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 참조 # 12635

jd-carroll 에 2015년 08월 20일

@ jd-carroll : 정말 흥미 롭 네요. 시간이 있으면 오늘 조금 늦게 다시 방문 할 수 있습니다. 물건으로 꽤 흠뻑 젖었습니다. 그것은 단지 더 많은 수수께끼를 만듭니다. 왜냐하면 그것은 location. * 값 업데이트에 지연을 도입해서는 안되는 별도의 문제처럼 보이기 때문입니다.

@realityfilter : 데코레이터에 대해 언급하는 것이 재미

CleverCoder 에 2015년 08월 20일

모두 안녕,
이 수정이 수정하기 쉬운 코드에 버그를 도입했다고 덧붙이고 싶었습니다.

템플릿에는 href = "#"및 ng-click = "someCall ()"을 사용하는 앵커 태그가 있습니다. href로 인해이 수정을 사용하여 사이트가 index.html로 이동했습니다. href를 제거하면 문제가 해결되었습니다.

jyc66 에 2015년 08월 20일

Ionic의 뒤로 버튼 탐색 중에 앱이 중단됩니다. 먼저 새보기로 이동 한 다음 부분적으로 이전보기로 돌아온 다음 Ionic의 모든 해상도에서 IOS9 베타의 새보기로 다시 이동합니다.

ajaybeniwal 에 2015년 08월 21일

iOS 9 베타 5 13A4325c, Angular 1.4.0 (cordova-ios 3.9.1 포함)과 동일한 문제입니다. 기본 UIWebView 버그가 수정되기를 바랍니다.

aderowbotham 에 2015년 08월 31일

Angular v1.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 Seed에 여전히 문제가 있으므로 앱을 업데이트하십시오!

markoivanovski 에 2015년 09월 09일

iOS9 GM (13A340)에 여전히 문제가 있음을 확인할 수 있습니다.

richardbrammer 에 2015년 09월 10일

따라서 이는 Apple이 무언가를 망가 뜨 렸고 앱이 충돌하지 않도록 앱을 다시 업데이트해야 함을 의미합니다 (일부는 몇 달 또는 1 년 이상 변경되지 않음). 이해가갑니다 :(. Apple이 iOS9 출시를 위해이 문제를 해결하도록하고 싶습니다. 오래된 앱에서 최신 Angular 버전으로 이동하면 다른 기능도 손상 될 수 있습니다.

Angular가 iOS9에 문제가있는 유일한 프레임 워크인지 의심 스럽습니까?

Martinspire 에 2015년 09월 10일

따라서 Ionic 팀의 @adamdbradley , @perrygovier 및 @mhartington 은 Ionic 및 일반 Angular 앱에서도 작동하는 수정을 위해 하루 종일 작업 해 왔습니다. 목표는 Angular를 수정할 필요가없는 드롭 인 수정이며 대부분의 1.2+ Angular 버전에서 작동합니다.

다음은 이 패치 를 적용하여 $browser 를 장식하고 수정하는 현재 번들 솔루션입니다. 참고 : 이것은 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 파일을 사용하는 것은 권장하지 않습니다. CDN 파일은 거기에만 있으므로 지금 테스트하기가 더 쉽습니다.

테스트하려면 angular 또는 ionic.bundle.js 파일 아래에이 스크립트 태그를 배치하십시오.

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

또한 현재 iOS9에서 실행 중인지 여부에 관계없이 패치를 적용합니다. iOS 9 UIWebView에서만 실행되도록 곧 수정 될 예정입니다.

여기에서 해당 Ionic 문제를 따르세요 : https://github.com/driftyco/ionic/issues/4082#issuecomment -139079725

mlynch 에 2015년 09월 10일

안녕하세요,

UI-sref는 매력처럼 작동하지만 $ state.go는 뒤로 버튼 애니메이션을 중단합니다.
이 수정 사항을 적용한 후에도 페이지가 많이 깜박입니다.

문안 인사,
아제이 싱

2015 년 9 월 10 일 목요일 오전 6:23에 Max Lynch [email protected] 은 다음과 같이 썼습니다.

그래서 @adamdbradley https://github.com/adamdbradley , @perrygovier
https://github.com/perrygovier 및 @mhartington
Ionic 팀의 https://github.com/mhartington 이 작업 중입니다.
Ionic 및 일반 Angular 앱에서 작동하는 수정 사항에 대해 하루 종일
잘. 목표는 수정이 필요없는 드롭 인 수정입니다.
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 파일 사용을 권장하지 않습니다.
프로덕션의 경우에만 있으므로 지금 테스트하기가 더 쉽습니다.
그것을 테스트하고 어떻게 진행되는지 알려주십시오. 감사합니다.
테스트하려면이 스크립트 태그를 각도 또는
ionic.bundle.js 파일 :

Angular.js: UIWebView가있는 iOS 9에서 위치 변경에 대한 무한 다이제스트 (Safari / WKWebView가 아님)

가장 유용한 댓글

모든 154 댓글

관련 문제