오류: $digest() 반복 횟수가 10회에 달했습니다.중단 중! 동적 정렬 조건 포함

오류: $digest() 반복 횟수가 10회에 달했습니다.중단 중! 동적 정렬 조건 포함

사용자의 이름과 점수를 반복하여 표시하는 다음 코드가 있습니다.

<div ng-controller="AngularCtrl" ng-app>
  <div ng-repeat="user in users | orderBy:predicate:reverse | limitTo:10">
    <div ng-init="user.score=user.id+1">
        {{user.name}} and {{user.score}}
    </div>
  </div>
</div>

그리고 대응하는 각도 컨트롤러.

function AngularCtrl($scope) {
    $scope.predicate = 'score';
    $scope.reverse = true;
    $scope.users = [{id: 1, name: 'John'}, {id: 2, name: 'Ken'}, {id: 3, name: 'smith'}, {id: 4, name: 'kevin'}, {id: 5, name: 'bob'}, {id: 6, name: 'Dev'}, {id: 7, name: 'Joe'}, {id: 8, name: 'kevin'}, {id: 9, name: 'John'}, {id: 10, name: 'Ken'}, {id: 11, name: 'John'}, {id: 1, name: 'John'}, {id: 2, name: 'Ken'}, {id: 3, name: 'smith'}, {id: 4, name: 'kevin'}, {id: 5, name: 'bob'}, {id: 6, name: 'Dev'}, {id: 7, name: 'Joe'}, {id: 8, name: 'kevin'}, {id: 9, name: 'John'}, {id: 10, name: 'Ken'}]
}

위의 코드를 실행하면 오류: 10 $digest() 반복이 발생합니다. 콘솔에 오류가 있습니다.

나는 같은 것을 위해 jsfiddle을 만들었다.

정렬 술어는 ng-repeat 내에서만 초기화되며 개체 수에도 제한이 적용됩니다.sortby와 limitTo watchers가 함께 있는 것이 오류의 원인이라고 생각합니다.

$scope.reverse가 false(점수 오름차순)인 경우 오류는 발생하지 않습니다.

여기 뭐가 문제인지 아는 사람 있나요?도와주셔서 대단히 감사합니다.

이 jsFiddle을 확인해 주세요.(코드는 기본적으로 당신이 올린 것과 동일하지만 스크롤 이벤트를 바인딩하기 위해 창 대신 요소를 사용합니다.)

제가 보기엔 당신이 올린 코드에는 문제가 없습니다.사용자가 언급한 오류는 일반적으로 속성에서 변경 루프를 생성할 때 발생합니다.예를 들어 특정 속성의 변경을 감시한 후 리스너에서 해당 속성의 값을 변경하는 경우:

$scope.$watch('users', function(value) {
  $scope.users = [];
});

그러면 다음 오류 메시지가 나타납니다.

회 : $s : $second() 회회회회 10 회회회회회회 。중!!
'5'는 '5'입니다.

코드에는 이러한 상황이 없는지 확인합니다.

업데이트:

이것이 당신의 문제입니다.

<div ng-init="user.score=user.id+1"> 

렌더링 중에 오브젝트/모델을 변경하지 마십시오.변경하지 않으면 새로운 렌더(그리고 루프)가 강제로 실행되어 'Error: 10 $digest() 반복이 발생합니다. 중단 중!')

모델을 업데이트하려면 뷰가 아닌 컨트롤러 또는 명령에서 수행하십시오.angularjs 설명서에서는ng-init이치노

템플릿에서 ngInit 디렉티브 사용(장난감/예제 앱 전용, 실제 애플리케이션에는 권장되지 않음)

여기 jsFiddle과 작업 예를 나타냅니다.

이 오류의 원인은...

ng-if="{{myTrustSrc(chat.src)}}"

템플릿으로

이로 인해 컨트롤러의 함수 myTrustSrc가 엔드리스 루프에서 호출됩니다.이 줄에서 ng-if를 제거하면 문제가 해결됩니다.

<iframe ng-if="chat.src" id='chat' name='chat' class='chat' ng-src="{{myTrustSrc(chat.src)}}"></iframe>

함수는 ng-if를 사용하지 않을 때 몇 번만 호출됩니다.왜 함수가 ng-src로 여러 번 호출되는지 궁금하네요.

이것은 컨트롤러의 기능입니다.

$scope.myTrustSrc = function(src) {
    return $sce.trustAsResourceUrl(src);
}

저는 매번 새로운 오브젝트를 만들고 있는 디렉티브에 2방향 바인딩 입력 '='의 함수 결과를 전달하고 있었습니다.

그래서 그런 생각이 들었어요.

<my-dir>
   <div ng-repeat="entity in entities">
      <some-other-dir entity="myDirCtrl.convertToSomeOtherObject(entity)"></some-other-dir>
   </div>
</my-dir>

my-backer의 컨트롤러 방식은

this.convertToSomeOtherObject(entity) {
   var obj = new Object();
   obj.id = entity.Id;
   obj.value = entity.Value;
   [..]
   return obj;
}

내가 했을 때

this.convertToSomeOtherObject(entity) {
   var converted = entity;
   converted.id = entity.Id;
   converted.value = entity.Value;
   [...]
   return converted;
}

문제를 해결했다!

이것이 누군가에게 도움이 되기를 바랍니다:)

이런 일이 일어난 또 다른 예가 있습니다.향후 참조에 도움이 되었으면 합니다.AngularJS 1.4.1을 사용하고 있습니다.

커스텀 디렉티브에 대한 복수의 콜에 대해서, 다음의 마크업을 실시했습니다.

<div ng-controller="SomeController">
    <myDirective data="myData.Where('IsOpen',true)"></myDirective>
    <myDirective data="myData.Where('IsOpen',false)"></myDirective>
</div>

myData이며, 「」입니다.Where()는 IsOpen 속성이 두 번째 파라미터의 bool 값과 일치하는 원래 아이템을 포함하는 새로운 배열을 반환하는 어레이를 반복하는 확장 메서드입니다.

에서 ""를 합니다.$scope.data음음음같 뭇매하다

DataService.getData().then(function(results){
    $scope.data = results;
});

더 ★★★★★★★★★★★★★★★★」Where()위의 마크업과 같은 명령어로부터의 확장 방법이 문제였습니다. 확장 했습니다.

<div ng-controller="SomeController">
    <myDirective data="openData"></myDirective>
    <myDirective data="closedData"></myDirective>
</div>

및 새로운 컨트롤러 코드:

DataService.getData().then(function(results){
    $scope.openData = results.Where('IsOpen',true);
    $scope.closedData = results.Where('IsOpen',false);
});

파티에는 꽤 늦었지만, 각도가 1.5.8인 UI 라우터에 결함이 있어서 문제가 발생했습니다.주의할 점은 이 에러는 처음 어플리케이션을 실행할 때만 발생하며 이후 재발하지 않는다는 것입니다.github의 이 게시물이 나의 문제를 해결했다.기본적으로 오류는$urlRouterProvider.otherwise("/home")해결 방법은 다음과 같습니다.

$urlRouterProvider.otherwise(function($injector, $location) {
   var $state = $injector.get("$state");
   $state.go("your-state-for-home");
});

우선 $watch를 사용하라는 모든 답변을 무시합니다.앵글은 이미 듣는 사람에게서 작용한다.당신은 이런 식으로 생각하는 것만으로 일을 복잡하게 만들고 있다는 것을 보증합니다.

사용자에게 $timeout을 알리는 모든 답변을 무시합니다.페이지를 로드하는 데 얼마나 걸릴지 알 수 없기 때문에 이 방법은 권장되지 않습니다.

페이지 렌더링이 완료되면 알 수 있습니다.

<div ng-app='myApp'>
<div ng-controller="testctrl">
    <label>{{total}}</label>
    <table>
      <tr ng-repeat="item in items track by $index;" ng-init="end($index);">
        <td>{{item.number}}</td>
      </tr>
    </table>
</div>

var app = angular.module('myApp', ["testctrl"]);
var controllers = angular.module("testctrl", []);
 controllers.controller("testctrl", function($scope) {

  $scope.items = [{"number":"one"},{"number":"two"},{"number":"three"}];

  $scope.end = function(index){
  if(index == $scope.items.length -1
        && typeof $scope.endThis == 'undefined'){

            ///  DO STUFF HERE
      $scope.total = index + 1;
      $scop.endThis  = true;
 }
}
});

ng-repeat을 $index로 추적하고 배열의 길이가 인덱스와 같을 경우 루프를 중지하고 논리를 수행합니다.

jsfiddle

각도 트리 컨트롤의 맥락에서 이 오류가 발생했습니다.내 경우엔 트리 옵션이었어함수에서 treeOptions()를 반환하고 있었습니다.그것은 항상 같은 물체를 돌려주고 있었다.하지만 Angular는 마법처럼 새로운 물체라고 생각하고 소화 주기를 시작합니다.다이제스트의 재발을 일으킵니다.해결책은 treeOptions를 범위에 바인드하는 것이었습니다.그리고 딱 한 번만 할당해 주세요.

이상하다...똑같은 실수를 했어요 다른 데서 온 거죠컨트롤러를 작성할 때 다음과 같은 $location 파라미터를 전달했습니다.

App.controller('MessageController', function ($scope, $http, $log, $location, $attrs, MessageFactory, SocialMessageFactory) {
   // controller code
});

서드파티 라이브러리 또는 순수 JS를 사용하여 특정(여기서 window.location)을 조작하면 다음 각도 다이제스트에서 이 오류가 발생한다는 것이 증명되었습니다.

컨트롤러 작성 파라미터에서 $location을 삭제하기만 하면 이 오류 없이 다시 동작합니다.또는 반드시 angular에서 $location을 사용해야 하는 경우 모든 항목을 제거해야 합니다.<a href="#">link</a>템플릿 페이지 링크에서 href=links로 입력합니다.나한테는 통했어

언젠가 도움이 되길 바랍니다.

angular를 사용하는 경우 브라우저 콘솔에서 ng-스토리지 프로파일을 삭제합니다.그것은 일반적인 해결책이 아니다. 내 경우에는 효과가 있었다.

Chrome F12 -> 리소스 -> 로컬 스토리지

Firefox를 버전 51로 업그레이드한 직후에 이 문제가 발생했습니다.끝나고clearing the cache, 문제가 해결되었습니다.

저도 비슷한 오류가 있었습니다.왜냐하면

ng-class="GetLink()"

대신

ng-click="GetLink()"

이것은 각도 1.6에서 1.7로 업그레이드한 후 ng-src에서 호출된 함수의 반환값으로 $sce.trustAsResourceUrl()을 사용했을 때 발생하였습니다.이 문제는 여기서 볼 수 있습니다.

내 경우 다음을 변경해야 했습니다.

<source ng-src="{{trustSrc(someUrl)}}" type='video/mp4' />
trustSrc = function(url){
    return $sce.trustAsResourceUrl(url);
};

로.

<source ng-src='{{trustedUrl}} type='video/mp4' />
trustedUrl = $sce.trustAsResourceUrl(someUrl);

커스텀 정렬 필터로 Array.reverse()를 호출했을 때, AngularJS 1.3.9 를 사용했을 때와 같은 에러가 발생했습니다.

제거했더니 잘 될 것 같아.

언급URL : https://stackoverflow.com/questions/14376879/error-10-digest-iterations-reached-aborting-with-dynamic-sortby-predicate