programing

각도 JS: IE 오류: 10 $digest() 반복에 도달했습니다.중단 중

stoneblock 2023. 3. 20. 21:22

각도 JS: IE 오류: 10 $digest() 반복에 도달했습니다.중단 중

Angular는 처음이라 IE와 관련된 문제에 시달리고 있습니다.

IE 에러가 발생하고 있습니다.

Webpage error details

User Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)
Timestamp: Thu, 13 Dec 2012 04:00:46 UTC


Message: 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: function $locationWatch() {\n      var oldUrl = $browser.url();\n\n      if (!changeCounter || oldUrl != $location.absUrl()) {\n\tchangeCounter++;\n\t$rootScope.$evalAsync(function() {\n\t  if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).\n\t      defaultPrevented) {\n\t    $location.$$parse(oldUrl);\n\t  } else {\n\t    $browser.url($location.absUrl(), $location.$$replace);\n\t    $location.$$replace = false;\n\t    afterLocationChange(oldUrl);\n\t  }\n\t});\n      }\n\n      return changeCounter;\n    }; newVal: 7; oldVal: 6"],["fn: function $locationWatch() {\n      var oldUrl = $browser.url();\n\n      if (!changeCounter || oldUrl != $location.absUrl()) {\n\tchangeCounter++;\n\t$rootScope.$evalAsync(function() {\n\t  if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).\n\t      defaultPrevented) {\n\t    $location.$$parse(oldUrl);\n\t  } else {\n\t    $browser.url($location.absUrl(), $location.$$replace);\n\t    $location.$$replace = false;\n\t    afterLocationChange(oldUrl);\n\t  }\n\t});\n      }\n\n      return changeCounter;\n    }; newVal: 8; oldVal: 7"],["fn: function $locationWatch() {\n      var oldUrl = $browser.url();\n\n      if (!changeCounter || oldUrl != $location.absUrl()) {\n\tchangeCounter++;\n\t$rootScope.$evalAsync(function() {\n\t  if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).\n\t      defaultPrevented) {\n\t    $location.$$parse(oldUrl);\n\t  } else {\n\t    $browser.url($location.absUrl(), $location.$$replace);\n\t    $location.$$replace = false;\n\t    afterLocationChange(oldUrl);\n\t  }\n\t});\n      }\n\n      return changeCounter;\n    }; newVal: 9; oldVal: 8"],["fn: function $locationWatch() {\n      var oldUrl = $browser.url();\n\n      if (!changeCounter || oldUrl != $location.absUrl()) {\n\tchangeCounter++;\n\t$rootScope.$evalAsync(function() {\n\t  if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).\n\t      defaultPrevented) {\n\t    $location.$$parse(oldUrl);\n\t  } else {\n\t    $browser.url($location.absUrl(), $location.$$replace);\n\t    $location.$$replace = false;\n\t    afterLocationChange(oldUrl);\n\t  }\n\t});\n      }\n\n      return changeCounter;\n    }; newVal: 10; oldVal: 9"],["fn: function $locationWatch() {\n      var oldUrl = $browser.url();\n\n      if (!changeCounter || oldUrl != $location.absUrl()) {\n\tchangeCounter++;\n\t$rootScope.$evalAsync(function() {\n\t  if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).\n\t      defaultPrevented) {\n\t    $location.$$parse(oldUrl);\n\t  } else {\n\t    $browser.url($location.absUrl(), $location.$$replace);\n\t    $location.$$replace = false;\n\t    afterLocationChange(oldUrl);\n\t  }\n\t});\n      }\n\n      return changeCounter;\n    }; newVal: 11; oldVal: 10"]]
Line: 7859
Char: 6
Code: 0
URI: http://localhost:8080/__assets__/lib/angular/angular.js

이 문제는 IE 8 및 IE 9 이외의 브라우저에서는 발생하지 않습니다.

위치 필터가 포함된 콘텐츠 필터링 개체를 보는 시계가 있습니다.

여기서 궁금한 점은 IE 이외의 브라우저에서는 왜 이 문제가 발생하지 않는지, 어떻게 하면 이 문제를 해결할 수 있는지입니다.잘 부탁드립니다.

Tiago Rolldo가 확실히 옳다.나도 똑같은 문제가 있었어.디버깅 후 코드에는

location.hash = "#/app/" + id;

무한 루프 문제의 원인이 됩니다.몇 가지 조사 끝에, 나는 이것을 발견했다.

$location.path("/apps/" + id);

제 문제가 완벽하게 해결되죠

같은 에러로 같은 문제가 발생했습니다.크롬\FF는 정상적으로 동작했지만 IE는 실패했습니다.앱에서 링크를 클릭했는데 가끔 이 오류가 나오기도 하고 안 나오기도 합니다.

1) 제가 보기에는 다음과 같은 링크가 거의 없습니다.

<a href="#" ng-click="addIP(ip)">Add some IP</a>

2) 다음과 같이 IpRanges 컬렉션에 추가된 링크의 핸들러를 클릭합니다.

$scope.IpRanges.push(ip);

3) 컬렉션 자체가 ng-repeat에 의해 뷰에 바인딩되어 있어 왠지 IE가 이 상황을 잘 처리할 수 없다고 생각했습니다.아마 바인딩/추가/적용 이벤트의 순서가 올바르지 않은 것 같습니다.링크를 클릭한 후 url에 #기호가 추가되어 깜빡거리기도 하고 오류가 발생하기도 합니다.그래서 href Atribute를 삭제했더니 모든 것이 정상적으로 동작했습니다.

<a href="" ng-click="addCurrentIP()">Add as allowed IP</a>

비슷한 상황에서는 스판이나 디브(div)를 사용하는 게다.

Angular를 사용했을 때도 같은 문제가 있었습니다.IE9의 JS v1.2.13 ($window를 호출할 때)history.back() (특히 Windows Phone의 경우).

그 $window가 근본 원인인 것 같습니다.IE의 history.back()은 $location 직전에 href를 변경합니다.Watch()가 실행되므로 oldUrl은 새로운 URL을 포함하고 각도를 무한 $digest로 보냅니다.

당장 $window에 대한 호출을 대체하는 것이 좋습니다.history.back()을 지정합니다.

setTimeout(function () 
{
    $window.history.back();
}, 0);

오류 보고서를 보면 changeCounter 변수에 대한 $watch와 이 워처 함수가 있음을 알 수 있습니다.

function $locationWatch() {
    var oldUrl = $browser.url();
    if (!changeCounter || oldUrl != $location.absUrl()) {
        changeCounter++;
        $rootScope.$evalAsync(function () {
            if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl)
                .defaultPrevented) {
                $location.$$parse(oldUrl);
            } else {
                $browser.url($location.absUrl(), $location.$$replace);
                $location.$$replace = false;
                afterLocationChange(oldUrl);
            }
        });
    }
    return changeCounter;
};

또한 change Counter는 $browser.url()이 $location.absUrl()과 같지 않은 경우 값이 증가합니다.$watch 함수는 변경/반응 루프를 10회만 수행할 수 있기 때문에 10회 반복하면 오류가 발생합니다.여러분이 보고 있는 가치를 바꾸면, 그것은 결국 깨집니다.

$location.absUrl()과 $browser.url()의 값을 기록하여 다른 브라우저에서는 일치하는 이유를 확인합니다.

IE 10에서 문제가 발생했습니다.사용하고 있었습니다.

window.location.href = '#/';

루트를 변경할 수 있습니다.아래 코드로 대체

$location.path('/');

문제를 해결했다

TLDR

를 사용하고 있는 경우는,

$state.go('details', {id:item.ID});

배경

하기 위해 이 기능을 사용하면 할 수 .ng-click="details(item)"는요, ★★★★★★★★★★★★★★★★★★★★★」tr s ' 、 ' ' 、 ' ' ' ' 。

$scope.details = function (item) {
    $window.location.href = "#/details/" + item.ID;
}

나는 일을 .10 $digest() iterations reachedIE.IE.E.E.IE.E.IE.E.IE.IE.

참고:

Angular에 브레이크 포인트를 배치했습니다.JS v1.2.0rc1 angular.js 행 7650은 Tiago의 답변에 이은 것입니다.

// update browser
var changeCounter = 0;
$rootScope.$watch(function $locationWatch() {
  var oldUrl = $browser.url();
  var currentReplace = $location.$$replace;

  if (!changeCounter || oldUrl != $location.absUrl()) {
    changeCounter++; /* <-- breakpoint here, line 7650 */
    $rootScope.$evalAsync(function() {
      if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).
          defaultPrevented) {
        $location.$$parse(oldUrl);
      } else {
        $browser.url($location.absUrl(), currentReplace);
        afterLocationChange(oldUrl);
      }
    });
  }
  $location.$$replace = false;

  return changeCounter;
});

결과.

Chrome의 출력

  • 브레이크포인트는 상세페이지가 로드되고 있을 때 딱 한 번만 히트했습니다.
  • oldUrl (예:)$browser.url()는, URL 1)의 URL 을 보고하고 있었습니다.
  • $location.absUrl()【URL】【URL 。

IE7,8로부터의 출력

  • 브레이크포인트가 연속적으로 맞았다.
  • oldUrl (예:)$browser.url()는, URL1)을 .
  • $location.absUrl()URL을 사용합니다.

다른 페이지로 리다이렉트 할 때 이 문제가 발생했습니다.

$window.location.href = '#/path/'

다음과 같이 변경함으로써 해결:

$location.path('/path/');

언급URL : https://stackoverflow.com/questions/13853844/angular-js-ie-error-10-digest-iterations-reached-aborting