AngularJS: Mencegah kesalahan $ digest sudah berlangsung saat memanggil $ scope. $ Apply ()

Saya menemukan bahwa saya perlu memperbarui halaman saya ke lingkup saya secara manual lebih dan lebih sejak membangun aplikasi di sudut.

Satu-satunya cara saya tahu untuk melakukan ini adalah menelepon $apply()dari lingkup pengontrol dan arahan saya. Masalah dengan ini adalah bahwa ia terus melempar kesalahan ke konsol yang berbunyi:

Kesalahan: $ digest sudah dalam proses

Adakah yang tahu bagaimana cara menghindari kesalahan ini atau mencapai hal yang sama tetapi dengan cara yang berbeda?

Jangan gunakan pola ini - ini pada akhirnya akan menyebabkan lebih banyak kesalahan daripada yang dipecahkan. Meskipun Anda pikir itu memperbaiki sesuatu, itu tidak.

Anda dapat memeriksa apakah a $digestsudah dalam proses dengan memeriksa $scope.$$phase.

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

$scope.$$phaseakan kembali "$digest"atau "$apply"jika a $digestatau $applysedang berlangsung. Saya percaya perbedaan antara negara-negara ini adalah yang $digestakan memproses jam tangan dari ruang lingkup saat ini dan anak-anaknya, dan $applyakan memproses pengamat semua lingkup.

Untuk titik @ dnc253, jika Anda menemukan diri Anda menelepon $digestatau $applysering, Anda mungkin salah melakukannya. Saya biasanya menemukan saya perlu mencerna ketika saya perlu memperbarui keadaan lingkup sebagai akibat dari peristiwa DOM yang menembak di luar jangkauan Angular. Misalnya, ketika modal bootstrap twitter menjadi tersembunyi. Terkadang acara DOM menyala ketika a $digestsedang berlangsung, kadang tidak. Itu sebabnya saya menggunakan cek ini.

Saya ingin tahu cara yang lebih baik jika ada yang tahu.

Dari komentar: oleh @anddoutoi

angular.js Anti Patterns

2. Jangan lakukan if (!$scope.$$phase) $scope.$apply(), itu berarti Anda $scope.$apply()tidak cukup tinggi di tumpukan panggilan.

Dari diskusi baru-baru ini dengan orang-orang Angular tentang topik ini: Untuk alasan pembuktian di masa depan, Anda sebaiknya tidak menggunakannya$$phase

Ketika ditekan untuk cara "benar" untuk melakukannya, jawabannya saat ini

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

Baru-baru ini saya mengalami hal ini ketika menulis layanan sudut untuk membungkus facebook, google, dan API Twitter yang, pada berbagai tingkat, memiliki panggilan balik.

Berikut ini contoh dari dalam layanan. (Demi singkatnya, sisa layanan - yang mengatur variabel, menyuntikkan $ timeout dll - telah ditinggalkan.)

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);
            }
        });
    });
});

Perhatikan bahwa argumen penundaan untuk $ timeout adalah opsional dan akan menjadi 0 jika dibiarkan tidak disetel ( $ timeout memanggil $ browser.defer yang defaultnya ke 0 jika penundaan tidak diatur )

Sedikit tidak intuitif, tapi itu jawaban dari orang-orang yang menulis Angular, jadi itu cukup bagus untukku!

Siklus digest adalah panggilan sinkron. Itu tidak akan menghasilkan kontrol ke loop acara browser sampai selesai. Ada beberapa cara untuk mengatasinya. Cara termudah untuk mengatasinya adalah dengan menggunakan built in $ timeout, dan cara kedua adalah jika Anda menggunakan garis bawah atau lodash (dan seharusnya), hubungi yang berikut ini:

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

atau jika Anda memiliki lodash:

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

Kami mencoba beberapa solusi, dan kami benci menyuntikkan $ rootScope ke semua pengontrol, arahan, dan bahkan beberapa pabrik kami. Jadi, batas waktu $ dan _.defer telah menjadi favorit kami sejauh ini. Metode-metode ini berhasil memberitahu angular untuk menunggu hingga loop animasi berikutnya, yang akan menjamin bahwa ruang lingkup saat ini. $ Apply sudah berakhir.

Banyak jawaban di sini berisi saran yang bagus tetapi juga dapat menyebabkan kebingungan. Hanya menggunakan $timeoutadalah tidak yang terbaik atau solusi yang tepat. Juga, pastikan untuk membaca bahwa jika Anda khawatir dengan penampilan atau skalabilitas.

Hal-hal yang harus Anda ketahui

• $$phase bersifat pribadi untuk kerangka kerja dan ada alasan bagus untuk itu.

• $timeout(callback)akan menunggu sampai siklus intisari saat ini (jika ada) selesai, kemudian jalankan callback, lalu jalankan di akhir penuh $apply.

• $timeout(callback, delay, false)akan melakukan hal yang sama (dengan penundaan opsional sebelum menjalankan panggilan balik), tetapi tidak akan memunculkan $apply(argumen ketiga) yang menyimpan kinerja jika Anda tidak mengubah model Angular Anda ($ lingkup).

• $scope.$apply(callback) memohon, antara lain, $rootScope.$digest ,, yang berarti itu akan mereduksi ruang lingkup root aplikasi dan semua anak-anaknya, bahkan jika Anda berada dalam ruang lingkup yang terisolasi.

• $scope.$digest()hanya akan menyinkronkan modelnya ke tampilan, tetapi tidak akan mencerna ruang lingkup orang tuanya, yang dapat menyimpan banyak kinerja ketika bekerja pada bagian yang terisolasi dari HTML Anda dengan ruang lingkup yang terisolasi (sebagian besar dari direktif). $ digest tidak menerima panggilan balik: Anda mengeksekusi kode, lalu mencernanya.

• $scope.$evalAsync(callback)telah diperkenalkan dengan angularjs 1.2, dan mungkin akan menyelesaikan sebagian besar masalah Anda. Silakan merujuk paragraf terakhir untuk mempelajari lebih lanjut tentang hal itu.

• jika Anda mendapatkannya $digest already in progress error, maka arsitektur Anda salah: Anda tidak perlu memperbaiki ruang lingkup Anda, atau Anda tidak harus bertanggung jawab atas itu (lihat di bawah).

Cara menyusun kode Anda

Ketika Anda mendapatkan kesalahan itu, Anda mencoba untuk mencerna ruang lingkup Anda saat ini sedang dalam proses: karena Anda tidak tahu keadaan ruang lingkup Anda pada saat itu, Anda tidak bertanggung jawab menangani pencernaannya.

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);
});

Dan jika Anda tahu apa yang Anda lakukan dan bekerja pada arahan kecil yang terisolasi sementara bagian dari aplikasi Angular besar, Anda bisa lebih suka $ digest daripada lebih dari $ berlaku untuk menyimpan kinerja.

Pembaruan sejak Angularjs 1.2

Metode baru yang kuat telah ditambahkan ke $ scope apa saja: $evalAsync . Pada dasarnya, ia akan menjalankan callbacknya dalam siklus digest saat ini jika ada, jika tidak, siklus digest baru akan mulai mengeksekusi callback.

Itu masih tidak sebagus $scope.$digestjika Anda benar-benar tahu bahwa Anda hanya perlu menyinkronkan bagian yang terisolasi dari HTML Anda (karena yang baru $applyakan dipicu jika tidak ada yang sedang berlangsung), tetapi ini adalah solusi terbaik ketika Anda menjalankan fungsi yang Anda tidak dapat mengetahuinya apakah akan dijalankan secara sinkron atau tidak , misalnya setelah mengambil sumber daya yang berpotensi di-cache: kadang-kadang ini membutuhkan panggilan async ke server, jika tidak sumber daya akan diambil secara lokal secara sinkron.

Dalam kasus ini dan semua yang lainnya di mana Anda memiliki !$scope.$$phase, pastikan untuk menggunakannya$scope.$evalAsync( callback )

Metode pembantu kecil yang berguna untuk menjaga proses ini KERING:

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

Saya memiliki masalah yang sama dengan skrip pihak ketiga seperti CodeMirror misalnya dan Krpano, dan bahkan menggunakan metode safeApply yang disebutkan di sini belum memecahkan kesalahan bagi saya.

Tapi yang harus diselesaikan adalah menggunakan layanan $ timeout (jangan lupa menyuntikkannya terlebih dahulu)

Jadi, sesuatu seperti:

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

dan jika di dalam kode Anda yang Anda gunakan

ini

mungkin karena itu di dalam pengontrol direktif pabrik atau hanya perlu semacam ikatan, maka Anda akan melakukan sesuatu seperti:

.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();

  }]
)

Lihat http://docs.angularjs.org/error/$rootScope:inprog

Masalah muncul ketika Anda memiliki panggilan ke $applyyang kadang-kadang dijalankan secara asinkron di luar kode Angular (ketika $ berlaku harus digunakan) dan kadang-kadang sinkron dalam kode Angular (yang menyebabkan$digest already in progress kesalahan).

Ini dapat terjadi, misalnya, ketika Anda memiliki perpustakaan yang secara tidak sinkron mengambil item dari server dan menyimpannya. Pertama kali suatu item diminta, itu akan diambil secara tidak sinkron agar tidak memblokir eksekusi kode. Namun, kedua kalinya item tersebut sudah ada dalam cache sehingga dapat diambil secara serempak.

Cara untuk mencegah kesalahan ini adalah dengan memastikan bahwa kode yang dipanggil $applydijalankan secara tidak sinkron. Ini dapat dilakukan dengan menjalankan kode Anda di dalam panggilan $timeoutdengan penundaan diatur ke 0(yang merupakan default). Namun, memanggil kode Anda di dalam $timeoutmenghilangkan keharusan untuk menelepon $apply, karena $ timeout akan memicu $digestsiklus lain sendiri, yang pada gilirannya akan melakukan semua pembaruan yang diperlukan, dll.

Larutan

Singkatnya, alih-alih melakukan ini:

... your controller code...

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

... more of your controller code...

melakukan hal ini:

... your controller code...

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

... more of your controller code...

Hanya panggilan $apply bila Anda tahu kode yang menjalankannya akan selalu dijalankan di luar kode Angular (mis. Panggilan Anda ke $ apply akan terjadi di dalam callback yang dipanggil oleh kode di luar kode Angular Anda).

Kecuali jika seseorang menyadari adanya kerugian yang merugikan $timeoutakibat penggunaan yang berlebihan $apply, saya tidak melihat mengapa Anda tidak selalu dapat menggunakan $timeout(dengan nol penundaan) $apply, karena hal itu akan melakukan hal yang kira-kira sama.

Ketika Anda mendapatkan kesalahan ini, itu pada dasarnya berarti sudah dalam proses memperbarui tampilan Anda. Anda benar-benar tidak perlu memanggil $apply()dalam controller Anda. Jika tampilan Anda tidak diperbarui seperti yang Anda harapkan, dan kemudian Anda mendapatkan kesalahan ini setelah menelepon $apply(), kemungkinan besar Anda tidak memperbarui model dengan benar. Jika Anda memposting beberapa hal spesifik, kami dapat menemukan masalah intinya.

Bentuk aman terpendek $applyadalah:

$timeout(angular.noop)

Anda juga dapat menggunakan evalAsync. Ini akan berjalan beberapa saat setelah digest selesai!

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

Pertama-tama, jangan perbaiki dengan cara ini

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

Itu tidak masuk akal karena $ phase hanyalah flag boolean untuk siklus $ digest, jadi $ apply Anda () terkadang tidak akan berjalan. Dan ingat itu praktik yang buruk.

Sebaliknya, gunakan $timeout

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

Jika Anda menggunakan garis bawah atau lodash, Anda dapat menggunakan defer ():

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

Terkadang Anda masih akan mendapatkan kesalahan jika Anda menggunakan cara ini ( https://stackoverflow.com/a/12859093/801426 ).

Coba ini:

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

Anda harus menggunakan $ evalAsync atau $ timeout sesuai dengan konteksnya.

Ini adalah tautan dengan penjelasan yang bagus:

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

coba gunakan

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

dari pada

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

$ applyAsync Jadwalkan permohonan $ apply untuk terjadi di lain waktu. Ini dapat digunakan untuk mengantri banyak ekspresi yang perlu dievaluasi dalam intisari yang sama.

CATATAN: Di dalam $ digest, $ applyAsync () hanya akan memerah jika lingkup saat ini adalah $ rootScope. Ini berarti bahwa jika Anda memanggil $ digest pada lingkup anak, itu tidak akan secara otomatis memunculkan antrian $ applyAsync ().

Exmaple:

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

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

Referensi:

1. Cakupan. $ ApplyAsync () vs. Cakupan. $ EvalAsync () di AngularJS 1.3

2. Dokumen AngularJs

Saya akan menyarankan Anda untuk menggunakan acara khusus daripada memicu siklus intisari.

Saya datang untuk mengetahui bahwa menyiarkan acara khusus dan mendaftarkan pendengar untuk acara ini adalah solusi yang baik untuk memicu tindakan yang Anda inginkan terjadi baik saat Anda sedang dalam siklus intisari maupun tidak.

Dengan membuat acara khusus, Anda juga menjadi lebih efisien dengan kode Anda karena Anda hanya memicu pendengar yang berlangganan acara tersebut dan TIDAK memicu semua jam tangan yang terikat pada ruang lingkup seperti yang Anda lakukan jika Anda menggunakan ruang lingkup. $ Terapkan.

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


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

yearofmoo melakukan pekerjaan yang hebat dalam menciptakan fungsi $ safe yang dapat digunakan kembali untuk kita:

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

Penggunaan:

//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);

Saya sudah bisa menyelesaikan masalah ini dengan menelepon $evalalih-alih $applydi tempat-tempat di mana saya tahu bahwa $digestfungsinya akan berjalan.

Menurut dokumen , $applypada dasarnya melakukan ini:

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

Dalam kasus saya, suatu ng-clickperubahan variabel dalam lingkup, dan $ menonton pada variabel itu mengubah variabel lain yang harus $applied. Langkah terakhir ini menyebabkan kesalahan "intisari sudah dalam proses".

Dengan mengganti $applydengan $evaldi dalam ekspresi arloji, variabel ruang lingkup diperbarui seperti yang diharapkan.

Oleh karena itu, tampaknya jika intisari akan berjalan karena beberapa perubahan lain dalam Angular, $evalitulah yang perlu Anda lakukan.

gunakan $scope.$$phase || $scope.$apply();saja

Memahami bahwa dokumen sudut panggilan memeriksa $$phasesebuah anti-pola , saya mencoba untuk mendapatkan $timeoutdan_.defer bekerja.

Metode batas waktu dan yang ditangguhkan membuat flash {{myVar}}konten yang tidak diparsing dalam dom seperti FOUT . Bagi saya ini tidak dapat diterima. Itu membuat saya tanpa banyak diberitahu dogmatis bahwa ada sesuatu yang hack, dan tidak memiliki alternatif yang cocok.

Satu-satunya hal yang berfungsi setiap saat adalah:

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

Saya tidak mengerti bahaya dari metode ini, atau mengapa ini digambarkan sebagai peretasan oleh orang-orang di komentar dan tim sudut. Perintah itu tampaknya tepat dan mudah dibaca:

"Lakukan intisari kecuali sudah terjadi"

Dalam CoffeeScript itu bahkan lebih cantik:

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

Apa masalahnya dengan ini? Apakah ada alternatif yang tidak akan membuat FOUT? $ safeApply terlihat bagus tetapi menggunakan $$phasemetode inspeksi juga.

Ini adalah layanan utilitas saya:

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);
        }
    };
});

dan ini adalah contoh untuk penggunaannya:

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

Saya telah menggunakan metode ini dan tampaknya berfungsi dengan baik. Ini hanya menunggu waktu siklus selesai dan kemudian memicu apply(). Cukup panggil fungsi apply(<your scope>)dari mana saja Anda inginkan.

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);
  }
}

Ketika saya menonaktifkan debugger, kesalahan tidak terjadi lagi. Dalam kasus saya , itu karena debugger menghentikan eksekusi kode.

mirip dengan jawaban di atas tetapi ini telah bekerja dengan setia untuk saya ... dalam sebuah layanan tambahkan:

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

Kamu bisa menggunakan

$timeout

untuk mencegah kesalahan.

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

Masalah ini pada dasarnya datang ketika, kami meminta sudut untuk menjalankan siklus intisari meskipun dalam proses yang menciptakan masalah untuk sudut ke pemahaman. pengecualian konsekuensi di konsol.
1. Tidak masuk akal untuk memanggil ruang lingkup. $ Apply () di dalam fungsi $ timeout karena secara internal ia melakukan hal yang sama.
2. Kode berjalan dengan fungsi vanilla JavaScript karena asalnya tidak angular angular didefinisikan yaitu setTimeout
3. Untuk melakukan itu Anda dapat menggunakan

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

}); }

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

Ini solusi yang bagus untuk menghindari kesalahan ini dan menghindari $ apply

Anda dapat menggabungkan ini dengan debounce (0) jika memanggil berdasarkan peristiwa eksternal. Di atas adalah 'debounce' yang kami gunakan, dan contoh lengkap kode

.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;
            };
        };
    }
])

dan kode itu sendiri untuk mendengarkan suatu peristiwa dan memanggil $ digest hanya pada $ scope yang Anda butuhkan

        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();
        });

Ditemukan ini: https://coderwall.com/p/ngisma di mana Nathan Walker (dekat bagian bawah halaman) menyarankan seorang dekorator dalam $ rootScope untuk membuat func 'safeApply', kode:

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;
      }
    ]);
  }
]);

Ini akan menyelesaikan masalah Anda:

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