AngularJS: $ scope çağrılırken devam eden $ digest hatasını önle.

Açısal bir uygulama oluşturduğumdan beri sayfamı kapsamıma manuel olarak güncellemem gerektiğini fark ediyorum.

Bunu yapmanın tek yolu $apply()denetleyicilerimin ve yönergelerimin kapsamından çağırmak . Buradaki sorun, aşağıdakileri okuyan konsola bir hata atmaya devam etmesidir:

Hata: $ digest zaten devam ediyor

Herkes bu hatayı önlemek veya aynı şeyi ancak farklı bir şekilde elde biliyor mu?

Bu kalıbı kullanmayın - Bu, çözdüğünden daha fazla hataya neden olur. Bir şeyi düzelttiğini düşünseniz bile, olmadı.

A'nın devam edip etmediğini $digestkontrol ederek kontrol edebilirsiniz $scope.$$phase.

if(!$scope.$$phase) {
  //$digest or $apply
}

$scope.$$phasedönecek "$digest"veya "$apply"a $digestveya $applydevam ediyorsa . Bu devletler arasındaki farkın $digest, mevcut kapsamın saatlerini ve çocuklarını $applyişleyeceği ve tüm kapsamların izleyicilerini işleyeceğine inanıyorum.

@ Dnc253'e gelince, kendinizi sık sık aradığınızı $digestya da $applysık sık bulduğunuzda yanlış yapıyor olabilirsiniz. Genelde Angular'ın ulaşamayacağı bir DOM etkinliğinin bir sonucu olarak kapsamın durumunu güncellemem gerektiğinde sindirmem gerektiğine inanıyorum. Örneğin, bir twitter bootstrap modal gizlendiğinde. Bazen DOM olayı, a işlemi $digestdevam ederken tetiklenir, bazen de gerçekleşmez. Bu yüzden bu kontrolü kullanıyorum.

Biri bilirse daha iyi bir yol bilmek isterim.

Yorumlardan: @anddoutoi tarafından

angular.js Desen Karşıtı

2. Yapmayın if (!$scope.$$phase) $scope.$apply(), bu $scope.$apply()çağrı yığınında yeterince yüksek olmadığı anlamına gelir .

Açısal adamlarla bu konuyla ilgili son bir tartışmadan: Gelecekteki prova nedenlerinden dolayı,$$phase

Bunu yapmak için "doğru" yol için basıldığında, cevap şu anda

$timeout(function() {
  // anything you want can go here and will safely be run on the next digest.
})

Son zamanlarda, değişen derecelerde geri aramaların verildiği facebook, google ve twitter API'lerini sarmak için açısal hizmetler yazarken buna girdim.

Bir hizmetin içinden bir örnek. (Kısacası, hizmetin geri kalanı - değişkenleri ayarlayan, enjekte edilen $ zaman aşımı vb. - bırakıldı.)

window.gapi.client.load('oauth2', 'v2', function() {
    var request = window.gapi.client.oauth2.userinfo.get();
    request.execute(function(response) {
        // This happens outside of angular land, so wrap it in a timeout 
        // with an implied apply and blammo, we're in action.
        $timeout(function() {
            if(typeof(response['error']) !== 'undefined'){
                // If the google api sent us an error, reject the promise.
                deferred.reject(response);
            }else{
                // Resolve the promise with the whole response if ok.
                deferred.resolve(response);
            }
        });
    });
});

$ Timeout için gecikme bağımsız değişkeninin isteğe bağlı olduğunu ve ayarlanmadan bırakıldığında varsayılan olarak 0 olacağını unutmayın ( $ timeout , gecikme ayarlanmamışsa varsayılan olarak 0 olan $ browser.defer öğesini çağırır )

Biraz sezgisel değil, ama Angular yazan adamların cevabı, bu yüzden benim için yeterince iyi!

Özet döngüsü eşzamanlı bir çağrıdır. Tamamlanana kadar tarayıcının olay döngüsüne denetim sağlamaz. Bununla başa çıkmanın birkaç yolu vardır. Bununla başa çıkmanın en kolay yolu yerleşik $ zaman aşımını kullanmaktır ve ikinci bir yol alt çizgi veya lodash kullanıyorsanız (ve olmalısınız), aşağıdakileri arayın:

$timeout(function(){
    //any code in here will automatically have an apply run afterwards
});

veya lodash'ınız varsa:

_.defer(function(){$scope.$apply();});

Birkaç geçici çözüm denedik ve tüm kontrolörlerimize, yönergelerimize ve hatta bazı fabrikalara $ rootScope enjekte etmekten nefret ettik. Yani, $ timeout ve _.defer şimdiye kadar bizim favori oldu. Bu yöntemler, açısal olarak, geçerli kapsamın geçerli olduğunu garanti eden bir sonraki animasyon döngüsüne kadar beklemesini söyler.

Buradaki cevapların çoğu iyi tavsiyeler içerir, ancak karışıklığa da yol açabilir. Basitçe kullanarak $timeoutbir değil en iyi ne de doğru çözüm. Ayrıca, performanslar veya ölçeklenebilirlik konusunda endişeleriniz varsa bunu mutlaka okuyun.

Bilmeniz gerekenler

• $$phase çerçeveye özeldir ve bunun için iyi sebepler vardır.

• $timeout(callback)mevcut özet döngüsü (eğer varsa) tamamlanana kadar bekleyecek, sonra geri aramayı yürütebilecek ve sonunda bir tam çalışacaktır $apply.

• $timeout(callback, delay, false)aynısını yapar (geri aramayı yürütmeden önce isteğe bağlı bir gecikmeyle), ancak $applyAçısal modelinizi ($ kapsam) değiştirmediyseniz performans tasarrufu sağlayan bir (üçüncü argüman) tetiklemez.

• $scope.$apply(callback)diğer şeylerin yanı sıra, $rootScope.$digestyalıtılmış bir kapsam dahilinde olsanız bile uygulamanın ve tüm çocuklarının kök kapsamını en aza indireceği anlamına gelir.

• $scope.$digest()modelini görünümle senkronize eder, ancak ebeveyninizin kapsamını sindirmez, bu da HTML'nizin yalıtılmış bir kısmı üzerinde yalıtılmış bir kapsamla çalışırken (çoğunlukla bir yönergeden) çok fazla performans kaydedebilir. $ digest bir geri arama almaz: kodu çalıştırırsınız, sonra sindirirsiniz.

• $scope.$evalAsync(callback)angularjs 1.2 ile tanıtıldı ve muhtemelen sorunlarınızın çoğunu çözecek. Bu konuda daha fazla bilgi edinmek için lütfen son paragrafa bakın.

• alırsanız $digest already in progress error, mimariniz yanlıştır: ya kapsamınızı en aza indirmenize gerek yoktur ya da bundan sorumlu olmamalısınız (aşağıya bakın).

Kodunuzu yapılandırma

Bu hatayı aldığınızda, kapsamınızı zaten devam ederken sindirmeye çalışıyorsunuz: o noktada kapsamınızın durumunu bilmediğiniz için, sindirimiyle uğraşmaktan sorumlu değilsiniz.

function editModel() {
  $scope.someVar = someVal;
  /* Do not apply your scope here since we don't know if that
     function is called synchronously from Angular or from an
     asynchronous code */
}

// Processed by Angular, for instance called by a ng-click directive
$scope.applyModelSynchronously = function() {
  // No need to digest
  editModel();
}

// Any kind of asynchronous code, for instance a server request
callServer(function() {
  /* That code is not watched nor digested by Angular, thus we
     can safely $apply it */
  $scope.$apply(editModel);
});

Ve büyük bir Açısal uygulamanın bir parçasıyken yalıtılmış bir küçük yönerge üzerinde ne yaptığınızı ve çalıştığınızı biliyorsanız, performansları kaydetmek için $ uygulama yerine $ digest'i tercih edebilirsiniz.

Angularjs 1.2'den beri güncelleme

Yeni, güçlü yöntem herhangi $ kapsamına eklendi: $evalAsync. Temel olarak, eğer varsa, geri çağırma geçerli sindirim döngüsü içinde yürütülür, aksi takdirde yeni bir sindirim döngüsü geri çağrıyı yürütmeye başlar.

Bu, $scope.$digestHTML'nizin yalnızca yalıtılmış bir bölümünü senkronize etmeniz gerektiğini gerçekten biliyorsanız iyi değildir (çünkü $applyhiçbiri devam etmiyorsa yeni bir tetiklenir), ancak bir işlevi yürütürken bu en iyi çözümdür hangi eşzamanlı ya da değil çalıştırılır eğer bunu bilemez bazen bu bir sunucuya bir zaman uyumsuz çağrı gerektirecektir aksi kaynak eşzamanlı lokal getirilen olacak: potansiyel olarak önbelleğe bir kaynak getirilirken sonra örneğin.

Bu durumlarda ve sahip olduğunuz diğer tüm durumlarda !$scope.$$phase,$scope.$evalAsync( callback )

Bu işlemi KURU tutmak için kullanışlı küçük bir yardımcı yöntem:

function safeApply(scope, fn) {
    (scope.$$phase || scope.$root.$$phase) ? fn() : scope.$apply(fn);
}

CodeMirror ve Krpano gibi üçüncü taraf komut dosyalarında da aynı sorunu yaşadım ve hatta burada belirtilen safeApply yöntemlerini kullanmak benim için hatayı çözmedi.

Ama ne çözdü $ timeout hizmeti kullanıyor (önce enjekte etmeyi unutmayın).

Böylece, şöyle bir şey:

$timeout(function() {
  // run my code safely here
})

ve eğer kodunuzun içinde kullanıyorsanız

bu

belki de bir fabrika direktifinin kontrolörünün içinde olduğu veya sadece bir çeşit bağlamaya ihtiyaç duyduğu için, şöyle bir şey yapardınız:

.factory('myClass', [
  '$timeout',
  function($timeout) {

    var myClass = function() {};

    myClass.prototype.surprise = function() {
      // Do something suprising! :D
    };

    myClass.prototype.beAmazing = function() {
      // Here 'this' referes to the current instance of myClass

      $timeout(angular.bind(this, function() {
          // Run my code safely here and this is not undefined but
          // the same as outside of this anonymous function
          this.surprise();
       }));
    }

    return new myClass();

  }]
)

Bkz. Http://docs.angularjs.org/error/$rootScope:inprog

Bu $apply, bazen Açısal kodun dışında zaman uyumsuz olarak çalıştırıldığında ($ uygulamanız kullanıldığında) ve bazen de Açısal kod içinde ( $digest already in progresshataya neden olan ) zaman uyumlu olarak çalıştırıldığında bir sorun olduğunda ortaya çıkar .

Örneğin, bir sunucudan öğeleri eşzamansız olarak getiren ve önbelleğe alan bir kitaplığınız olduğunda bu olabilir. Bir öğe ilk kez istendiğinde, kod yürütülmesini engellememek için eşzamansız olarak alınır. Ancak ikinci kez, öğe eşzamanlı olarak alınabilmesi için zaten önbellektir.

Bu hatayı önlemenin yolu, çağıran kodun $applyeşzamansız olarak çalışmasını sağlamaktır . Bu, kodunuzu bir $timeoutgecikme 0(varsayılan) olarak ayarlanmış bir çağrı içinde çalıştırarak yapılabilir . Ancak, kodunuzu içeride çağırmak arama $timeoutzorunluluğunu ortadan kaldırır $apply, çünkü $ timeout $digestkendi başına başka bir döngüyü tetikler , bu da gerekli tüm güncellemeleri vb.

Çözüm

Kısacası, bunu yapmak yerine:

... your controller code...

$http.get('some/url', function(data){
    $scope.$apply(function(){
        $scope.mydate = data.mydata;
    });
});

... more of your controller code...

Bunu yap:

... your controller code...

$http.get('some/url', function(data){
    $timeout(function(){
        $scope.mydate = data.mydata;
    });
});

... more of your controller code...

Yalnızca $applykodu çalıştıran kodun her zaman Açısal kodun dışında çalıştırılacağını bildiğinizde arayın (ör. $ Apply çağrınız, Açısal kodunuzun dışındaki kod tarafından çağrılan bir geri arama içinde gerçekleşir).

Birisi kullanmanın bazı etkili dezavantaj farkında olmadığı sürece $timeoutüzerinde $applyher zaman kullanamadı neden görmüyorum $timeoutyerine (sıfır gecikme ile) $applyyaklaşık aynı şeyi yapacak gibi.

Bu hatayı aldığınızda, temel olarak görünümünüzü güncelleme sürecinde olduğu anlamına gelir. Gerçekten $apply()kumandanızda aramanıza gerek yok . Görünümünüz beklediğiniz gibi güncellenmiyorsa ve aramadan sonra bu hatayı alırsanız $apply(), büyük olasılıkla modeli doğru bir şekilde güncellemediğiniz anlamına gelir. Bazı özellikleri gönderirseniz, temel sorunu çözebiliriz.

En kısa kasa $applyşekli:

$timeout(angular.noop)

EvalAsync'i de kullanabilirsiniz. Sindirim bittikten bir süre sonra çalışacaktır!

scope.evalAsync(function(scope){
    //use the scope...
});

Her şeyden önce, bu şekilde düzeltme

if ( ! $scope.$$phase) { 
  $scope.$apply(); 
}

Bu mantıklı değil çünkü $ fazı $ digest döngüsü için yalnızca bir boole bayrağı olduğundan, $ Apply () bazen çalışmayacaktır. Ve bunun kötü bir uygulama olduğunu unutmayın.

Bunun yerine, $timeout

    $timeout(function(){ 
  // Any code in here will automatically have an $scope.apply() run afterwards 
$scope.myvar = newValue; 
  // And it just works! 
});

Alt çizgi veya lodash kullanıyorsanız, defer () yöntemini kullanabilirsiniz:

_.defer(function(){ 
  $scope.$apply(); 
});

Bazen bu şekilde kullanırsanız hatalar alabilirsiniz ( https://stackoverflow.com/a/12859093/801426 ).

Bunu dene:

if(! $rootScope.$root.$$phase) {
...

Bağlama göre $ evalAsync veya $ timeout kullanmalısınız.

Bu, iyi bir açıklamaya sahip bir bağlantıdır:

http://www.bennadel.com/blog/2605-scope-evalasync-vs-timeout-in-angularjs.htm

kullanmayı dene

$scope.applyAsync(function() {
    // your code
});

onun yerine

if(!$scope.$$phase) {
  //$digest or $apply
}

$ ApplyAsync $ Apply çağrısını daha sonra gerçekleşecek şekilde zamanlayın. Bu, aynı özet içinde değerlendirilmesi gereken birden fazla ifadeyi sıralamak için kullanılabilir.

NOT: $ digest içinde, $ applicationAsync () yalnızca geçerli kapsam $ rootScope ise temizlenir. Bu, bir alt kapsamda $ digest çağırırsanız, örtülü olarak $ applicAsync () kuyruğunu temizlemeyeceği anlamına gelir.

xmaple:

  $scope.$applyAsync(function () {
                if (!authService.authenticated) {
                    return;
                }

                if (vm.file !== null) {
                    loadService.setState(SignWizardStates.SIGN);
                } else {
                    loadService.setState(SignWizardStates.UPLOAD_FILE);
                }
            });

Referanslar:

1. Scope. $ ApplyAsync () ve AngularJS 1.3'te Scope. $ EvalAsync ()

2. AngularJs Dokümanları

Bir özet döngüsünü tetiklemek yerine özel bir etkinlik kullanmanızı öneririm.

Özel etkinlikler yayınlamanın ve dinleyicileri bu etkinlikler için kaydetmenin, bir özet programında olsanız da olmasanız da gerçekleşmesini istediğiniz bir eylemi tetiklemek için iyi bir çözüm olduğunu buldum.

Özel bir etkinlik oluşturarak kodunuzla daha verimli olursunuz çünkü yalnızca söz konusu etkinliğe abone olan dinleyicileri tetiklersiniz ve kapsamı çağırdıysanız kapsama bağlı tüm saatleri tetiklemezsiniz.

$scope.$on('customEventName', function (optionalCustomEventArguments) {
   //TODO: Respond to event
});


$scope.$broadcast('customEventName', optionalCustomEventArguments);

yearofmoo bizim için yeniden kullanılabilir bir güvenli uygulama oluşturmada iyi bir iş çıkardı:

https://github.com/yearofmoo/AngularJS-Scope.SafeApply

Kullanımı:

//use by itself
$scope.$safeApply();

//tell it which scope to update
$scope.$safeApply($scope);
$scope.$safeApply($anotherScope);

//pass in an update function that gets called when the digest is going on...
$scope.$safeApply(function() {

});

//pass in both a scope and a function
$scope.$safeApply($anotherScope,function() {

});

//call it on the rootScope
$rootScope.$safeApply();
$rootScope.$safeApply($rootScope);
$rootScope.$safeApply($scope);
$rootScope.$safeApply($scope, fn);
$rootScope.$safeApply(fn);

İşlevin çalışacağını bildiğim yerler $evalyerine arayarak bu sorunu çözebildim .$apply$digest

Dokümanlara göre , $applytemelde bunu yapar:

function $apply(expr) {
  try {
    return $eval(expr);
  } catch (e) {
    $exceptionHandler(e);
  } finally {
    $root.$digest();
  }
}

Benim durumumda, bir ng-clickkapsamdaki bir değişkeni değiştirir ve bu değişken üzerindeki bir $ watch, olması gereken diğer değişkenleri değiştirir $applied. Bu son adım, "özüm zaten devam ediyor" hatasına neden olur.

Değiştirerek $applyile $evalizle ifadenin içinde kapsamı değişkenler olarak beklenen güncelleme olsun.

Nedenle, göründüğü özeti çünkü açısal içinde diğer bazı değişimin her durumda çalışan olacak, reklamın söz konusu $eval'ing yapmanız gereken tek şey.

kullanmak $scope.$$phase || $scope.$apply();yerine

Açısal belgelerin $$phasebir anti-desen kontrol çağırdığını anlayarak, çalışmaya $timeoutve _.deferçalışmaya çalıştım .

Zaman aşımı ve ertelenmiş yöntemler {{myVar}}, dom'ta bir FOUT gibi ayrıştırılmamış içeriğin bir flaşını oluşturur . Benim için bu kabul edilemezdi. Bana dogmatik olarak bir şeyin bir saldırı olduğunu ve uygun bir alternatifi olmadığı söylenecek çok şey bırakmıyor.

Her seferinde işe yarayan tek şey:

if(scope.$$phase !== '$digest'){ scope.$digest() }.

Bu yöntemin tehlikesini veya yorumlarda ve açısal ekipte neden insanlar tarafından bir saldırı olarak tanımlandığını anlamıyorum. Komut kesin ve okunması kolay görünüyor:

"Şimdiye kadar bir şey olmadıkça özüm yapın"

CoffeeScript'te daha da güzel:

scope.$digest() unless scope.$$phase is '$digest'

Bununla ilgili sorun nedir? Bir FOUT yaratmayacak bir alternatif var mı? $ safeApply iyi görünüyor ancak $$phaseinceleme yöntemini de kullanıyor.

Bu benim utils hizmet:

angular.module('myApp', []).service('Utils', function Utils($timeout) {
    var Super = this;

    this.doWhenReady = function(scope, callback, args) {
        if(!scope.$$phase) {
            if (args instanceof Array)
                callback.apply(scope, Array.prototype.slice.call(args))
            else
                callback();
        }
        else {
            $timeout(function() {
                Super.doWhenReady(scope, callback, args);
            }, 250);
        }
    };
});

ve bu kullanımı için bir örnek:

angular.module('myApp').controller('MyCtrl', function ($scope, Utils) {
    $scope.foo = function() {
        // some code here . . .
    };

    Utils.doWhenReady($scope, $scope.foo);

    $scope.fooWithParams = function(p1, p2) {
        // some code here . . .
    };

    Utils.doWhenReady($scope, $scope.fooWithParams, ['value1', 'value2']);
};

Bu yöntemi kullanıyorum ve mükemmel çalışıyor gibi görünüyor. Bu, çevrimin bittiği zamanı bekler ve sonra tetiklenir apply(). apply(<your scope>)İstediğiniz yerden işlevi çağırmanız yeterlidir .

function apply(scope) {
  if (!scope.$$phase && !scope.$root.$$phase) {
    scope.$apply();
    console.log("Scope Apply Done !!");
  } 
  else {
    console.log("Scheduling Apply after 200ms digest cycle already in progress");
    setTimeout(function() {
        apply(scope)
    }, 200);
  }
}

Hata ayıklayıcıyı devre dışı bıraktığımda, hata artık gerçekleşmiyor. Benim durumumda , hata ayıklayıcı kod yürütmeyi durdurma nedeniyle oldu.

Yukarıdaki yanıtlara benzer ancak bu benim için sadakatle çalıştı ... bir hizmette ekle:

    //sometimes you need to refresh scope, use this to prevent conflict
    this.applyAsNeeded = function (scope) {
        if (!scope.$$phase) {
            scope.$apply();
        }
    };

Kullanabilirsiniz

$timeout

hatayı önlemek için.

 $timeout(function () {
                        var scope = angular.element($("#myController")).scope();
                        scope.myMethod();
                        scope.$scope();
                    },1);

Sorun, temelde, kavramaya açısal bir sorun yaratan süreçte olsa da, sindirim döngüsünü çalıştırmak için açısal olmasını talep ettiğimizde ortaya çıkıyor. konsolda sonuç istisnası.
1. Kapsamı çağırmanın bir anlamı yoktur. $ Timeout işlevi içinde $ Apply (), dahili olarak aynısını yapar.
2. Kod vanilya JavaScript işleviyle uyumludur çünkü doğal açısal açısal tanımlanmamış yani setTimeout
3. Bunu yapmak için

if (! Scope. $$ phase) {
scope. $ EvalAsync (function () {

}); }

        let $timeoutPromise = null;
        $timeout.cancel($timeoutPromise);
        $timeoutPromise = $timeout(() => {
            $scope.$digest();
        }, 0, false);

Bu hatayı önlemek ve $ uygulamaktan kaçınmak için iyi bir çözüm

harici etkinliğe göre arama yapıyorsanız bunu debounce (0) ile birleştirebilirsiniz. Yukarıda kullandığımız 'ayrılma' ve kodun tam örneği

.factory('debounce', [
    '$timeout',
    function ($timeout) {

        return function (func, wait, apply) {
            // apply default is true for $timeout
            if (apply !== false) {
                apply = true;
            }

            var promise;
            return function () {
                var cntx = this,
                    args = arguments;
                $timeout.cancel(promise);
                promise = $timeout(function () {
                    return func.apply(cntx, args);
                }, wait, apply);
                return promise;
            };
        };
    }
])

ve bazı olayları dinlemek için kodun kendisi ve $ digest'i yalnızca ihtiyacınız olan $ kapsamında çağırmak

        let $timeoutPromise = null;
        let $update = debounce(function () {
            $timeout.cancel($timeoutPromise);
            $timeoutPromise = $timeout(() => {
                $scope.$digest();
            }, 0, false);
        }, 0, false);

        let $unwatchModelChanges = $scope.$root.$on('updatePropertiesInspector', function () {
            $update();
        });


        $scope.$on('$destroy', () => {
            $timeout.cancel($update);
            $timeout.cancel($timeoutPromise);
            $unwatchModelChanges();
        });

Bunu buldum : https://coderwall.com/p/ngisma burada Nathan Walker (sayfanın altına yakın), $ rootScope'ta bir dekoratör önererek 'safeApply', kodu oluşturun:

yourAwesomeModule.config([
  '$provide', function($provide) {
    return $provide.decorator('$rootScope', [
      '$delegate', function($delegate) {
        $delegate.safeApply = function(fn) {
          var phase = $delegate.$$phase;
          if (phase === "$apply" || phase === "$digest") {
            if (fn && typeof fn === 'function') {
              fn();
            }
          } else {
            $delegate.$apply(fn);
          }
        };
        return $delegate;
      }
    ]);
  }
]);

Bu sorununuzu çözecektir:

if(!$scope.$$phase) {
  //TODO
}