Hata: 10 $ digest () yinelemesine ulaşıldı. Durduruluyor! dinamik sıralama ile

Ben tekrarlar ve kullanıcı adı ve puanı gösteren aşağıdaki kodu var:

<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>

Ve karşılık gelen açısal kontrolör.

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'}]
}

Yukarıdaki kodu çalıştırdığınızda, Hata: 10 $ digest () yineleme ulaştı. Durduruluyor! konsolumda hata var.

Ben de jsfiddle yarattım .

Sıralama yüklemi yalnızca ng tekrarı içinde başlatılır ve ayrıca nesne sayısına sınır uygulanır. Bu yüzden hem sortby hem de limitTo sahiplerine sahip olmak hata nedenidir.

$ Scope.reverse yanlışsa (artan puan sırası), hata vermez.

Burada neyin yanlış olduğunu anlamama yardımcı olan var mı? Yardımınız için çok teşekkür ederiz.

Lütfen bu jsFiddle'ı kontrol edin . (Kod temelde sizin gönderdi aynı ama ben kaydırma olayları bağlamak için pencere yerine bir öğe kullanın).

Görebildiğim kadarıyla, gönderdiğiniz kod ile ilgili bir sorun yoktur. Belirttiğiniz hata normalde bir özellik üzerinde değişiklik döngüsü oluşturduğunuzda oluşur. Örneğin, belirli bir mülkteki değişiklikleri izlediğinizde ve ardından o mülkün dinleyicideki değerini değiştirdiğinizde olduğu gibi:

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

Bu bir hata mesajıyla sonuçlanır:

Yakalanmayan Hata: 10 $ digest () yinelemesine ulaşıldı. Durduruluyor!
Gözcüler son 5 tekrarda ateş etti: ...

Kodunuzun bu tür durumlara sahip olmadığından emin olun.

Güncelleme:

Bu senin problemin:

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

(Ve dolayısıyla bir Sen işlemek veya başka, yeni bir hale zorlar sırasında nesneler / modelleri değiştirmemelisiniz döngü neden olur ': ulaşmıştır durduruluyor 10 $ sindirmek () tekrarlamalar. Hata!' ).

Modeli güncellemek istiyorsanız, Kontrol Cihazı veya Direktif üzerinde yapın, asla görünümde değil. angularjs belgeleri , bu tür durumlardan kaçınmak için tam olarak kullanılmamasını önerirng-init :

Şablonlarda ngInit yönergesini kullanma (yalnızca oyuncak / örnek uygulamalar için, gerçek uygulamalar için önerilmez)

İşte çalışan bir örnek ile bir jsFiddle .

Bu hatanın benim için sebebi ...

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

şablonumda

Denetleyicimdeki myTrustSrc işlevinin sonsuz bir döngüde çağrılmasına neden olur. Ng-if bu satırdan kaldırılırsa, sorun çözülür.

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

İşlev, ng-if kullanılmadığında yalnızca birkaç kez çağrılır. Hala neden ng-src ile fonksiyonun birden fazla çağrıldığını merak ediyorum?

Bu denetleyicideki işlevdir

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

Benim için her seferinde yeni bir nesne yaratan bir direktife 2 yönlü ciltleme girişi '=' olarak bir işlev sonucu geçiriyordum.

böylece böyle bir şey vardı:

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

ve my-dir üzerindeki denetleyici yöntemi

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

ki bunu yaptığımda

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

sorunu çözdü!

Umarım bu birine yardımcı olur :)

Buna sebep olan bir şey daha var. Umarım gelecekteki referans için yardımcı olur. AngularJS 1.4.1 kullanıyorum.

Özel bir yönerge için birden fazla çağrı ile bu biçimlendirme vardı:

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

myData bir dizi ve Where() IsOpen özelliğinin ikinci parametrede bool değeriyle eşleştiği orijinalden herhangi bir öğe içeren yeni bir dizi döndüren dizi üzerinde yinelenen bir uzantı yöntemidir.

Denetleyicide şöyle ayarladım $scope.data:

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

Where()Yukarıdaki biçimlendirmede olduğu gibi, direktiften uzantı yöntemini çağırmak sorun oldu. Bu sorunu gidermek için, aramayı biçimlendirme yerine uzantı yöntemine denetleyiciye taşıdım:

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

ve yeni denetleyici kodu:

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

Partiye oldukça geç ama benim sorunum meydana geldi çünkü ui-yönlendirici açısal 1.5.8 bir kusur var. Belirtilmesi gereken bir şey, bu hatanın sadece uygulamayı çalıştırdığımda ilk kez ortaya çıktığı ve daha sonra yeniden düzenlenmeyeceğidir. Github'dan gelen bu yazı sorunumu çözdü. Temelde hata içerir $urlRouterProvider.otherwise("/home") Çözüm aşağıdaki gibi bir çözümdü:

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

Yeni başlayanlar için tüm cevapları dikkate almayın, $ watch kullanmanız gerektiğini söyleyin. Açısal zaten bir dinleyiciden çalışıyor. Sadece bu yönde düşünerek işleri karmaşıklaştırdığınızı garanti ederim.

Size $ $ zaman aşımını bildiren tüm yanıtları yoksayın. Sayfanın yüklenmesi ne kadar süreceğini bilemezsiniz, bu nedenle bu en iyi çözüm değildir.

Yalnızca sayfanın ne zaman oluşturulmasını tamamladığını bilmeniz gerekir.

<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-tekrarını $ index ile takip edin ve dizi uzunluğu dizine eşit olduğunda döngüyü durdurun ve mantığınızı yapın.

jsfiddle

Bu hatayı açısal ağaç kontrolü bağlamında aldım. Benim durumumda ağaç seçenekleri vardı. Bir işlevden treeOptions () döndürüyordum. Hep aynı nesneyi döndürüyordu. Ancak Açısal sihirli bir şekilde yeni bir nesne olduğunu düşünüyor ve daha sonra bir sindirim döngüsünün başlamasına neden oluyor. Sindirimlerin tekrarlanmasına neden olur. Çözüm treeOptions'ı kapsama bağlamaktı. Ve sadece bir kez atayın.

Tuhaf ... Farklı bir şeyden gelen aynı hatayı aldım. Denetleyicimi oluşturduğumda $ location parametresini geçtim, şöyle:

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

Bunun bir hata olduğu kanıtlandı Bazı özellikleri (burada window.location) değiştirmek için üçüncü taraf kütüphaneleri veya saf JS'yi kullandığımızda .

Bu yüzden $ konumunu denetleyici oluşturma parametresinden kaldırdım ve bu hata olmadan tekrar çalıştı. Veya $ konumunu kesinlikle açısaldan kullanmanız gerekiyorsa <a href="#">link</a>, şablon sayfanızın bağlantılarındaki her birini kaldırmanız ve href = "" yazmanız gerekir . Benim için çalıştı.

Umarım bir gün yardımcı olabilir.

Açısal kullanıyorsanız, ng depolama profilini tarayıcı konsolunuzdan kaldırın. Genel bir çözüm biti değil Benim durumumda çalıştı.

Chrome F12-> Kaynaklar-> Yerel Depolama Alanında

Bu, Firefox'u 51 sürümüne yükselttikten hemen sonra oldu. Sonra clearing the cachesorun gitti.

ben benzer bir hata vardı, çünkü tanımlamıştı

ng sınıf = "GetLink ()"

onun yerine

") (GetLink" ng tıklayın =

Bu, ng-src denilen bir işlevin dönüş değeri olarak $ sce.trustAsResourceUrl () kullanılırken açısal 1.6 -> 1.7'den yükselttikten sonra başıma geldi. Burada bahsedilen bu sorunu görebilirsiniz .

Benim durumumda aşağıdakileri değiştirmek zorunda kaldım.

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

için

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

AngularJS 1.3.9 kullanarak tam olarak aynı hatayı aldım, özel sıralama filtresimde Array.reverse () çağırdı

Ben çıkardıktan sonra, çok iyi wa.