Mengapa menggunakan if (! $ Scope. $$ phase) $ scope. $ Apply () sebuah anti-pattern?

Terkadang saya perlu menggunakan $scope.$applykode saya dan terkadang muncul error "intisari sudah dalam proses". Jadi saya mulai menemukan jalan keluarnya dan menemukan pertanyaan ini: AngularJS: Mencegah error $ digest sedang berlangsung saat memanggil $ scope. $ Apply () . Namun di komentar (dan di wiki sudut) Anda dapat membaca:

Jangan lakukan jika (! $ Scope. $$ phase) $ scope. $ Apply (), artinya $ scope Anda. $ Apply () tidak cukup tinggi dalam tumpukan panggilan.

Jadi sekarang saya punya dua pertanyaan:

1. Mengapa tepatnya ini merupakan anti-pola?
2. Bagaimana cara menggunakan $ scope. $ Apply dengan aman?

"Solusi" lain untuk mencegah kesalahan "intisari sedang dalam proses" tampaknya menggunakan $ timeout:

$timeout(function() {
  //...
});

Apakah itu cara untuk pergi? Apakah ini lebih aman? Jadi, inilah pertanyaan sebenarnya: Bagaimana saya bisa sepenuhnya menghilangkan kemungkinan kesalahan "intisari sudah dalam proses"?

PS: Saya hanya menggunakan $ scope. $ Apply in non-angularjs callbacks yang tidak sinkron. (sejauh yang saya tahu itu adalah situasi di mana Anda harus menggunakan $ scope. $ apply jika Anda ingin perubahan Anda diterapkan)

Setelah menggali lebih dalam, saya dapat menjawab pertanyaan apakah selalu aman untuk digunakan $scope.$apply . Jawaban singkatnya adalah ya.

Jawaban panjang:

Karena cara browser Anda menjalankan Javascript, tidak mungkin dua panggilan intisari bertabrakan secara kebetulan .

Kode JavaScript yang kami tulis tidak semuanya berjalan sekaligus, melainkan dijalankan secara bergantian. Masing-masing belokan ini berjalan tanpa gangguan dari awal hingga akhir, dan ketika belokan sedang berjalan, tidak ada lagi yang terjadi di browser kami. (dari http://jimhoskins.com/2012/12/17/angularjs-and-apply.html )

Karenanya kesalahan "intisari sudah dalam proses" hanya dapat terjadi dalam satu situasi: Ketika $ apply dikeluarkan di dalam $ apply lain, misalnya:

$scope.apply(function() {
  // some code...
  $scope.apply(function() { ... });
});

Situasi ini tidak bisa muncul jika kita menggunakan $ scope.apply dalam callback non-angularjs murni, seperti misalnya callback setTimeout. Jadi kode berikut ini 100% antipeluru dan tidak perlu melakukan aif (!$scope.$$phase) $scope.$apply()

setTimeout(function () {
    $scope.$apply(function () {
        $scope.message = "Timeout called!";
    });
}, 2000);

bahkan yang ini aman:

$scope.$apply(function () {
    setTimeout(function () {
        $scope.$apply(function () {
            $scope.message = "Timeout called!";
        });
    }, 2000);
});

Apa yang TIDAK aman (karena $ timeout - seperti semua pembantu angularjs - sudah memanggil $scope.$applyAnda):

$timeout(function () {
    $scope.$apply(function () {
        $scope.message = "Timeout called!";
    });
}, 2000);

Ini juga menjelaskan mengapa penggunaan if (!$scope.$$phase) $scope.$apply()anti-pola. Anda tidak membutuhkannya jika Anda menggunakan $scope.$applydengan cara yang benar: Dalam callback js murni seperti setTimeoutmisalnya.

Baca http://jimhoskins.com/2012/12/17/angularjs-and-apply.html untuk penjelasan lebih rinci.

Ini jelas merupakan anti-pola sekarang. Saya telah melihat intisari meledak bahkan jika Anda memeriksa fase $$. Anda hanya tidak seharusnya mengakses API internal yang dilambangkan dengan $$prefiks.

Kamu harus menggunakan

 $scope.$evalAsync();

karena ini adalah metode yang disukai di Angular ^ 1.4 dan secara khusus diekspos sebagai API untuk lapisan aplikasi.

Dalam kasus apa pun saat intisari Anda sedang berlangsung dan Anda mendorong layanan lain untuk mencerna, itu hanya memberikan kesalahan yaitu intisari sudah dalam proses. jadi untuk menyembuhkan ini, Anda memiliki dua pilihan. Anda dapat memeriksa intisari lain yang sedang berlangsung seperti polling.

Pertama

if ($scope.$root.$$phase != '$apply' && $scope.$root.$$phase != '$digest') {
    $scope.$apply();
}

jika kondisi di atas benar, maka Anda dapat menerapkan $ scope Anda. $ apply otherwies not and

solusi kedua adalah menggunakan $ timeout

$timeout(function() {
  //...
})

ia tidak akan membiarkan intisari lainnya mulai sampai $ timeout menyelesaikan eksekusinya.

scope.$applymemicu $digestsiklus yang fundamental untuk pengikatan data 2 arah

Sebuah $digestsiklus memeriksa objek yaitu model (tepatnya $watch) yang dilampirkan untuk $scopemenilai apakah nilainya telah berubah dan jika mendeteksi perubahan maka diperlukan langkah-langkah yang diperlukan untuk memperbarui tampilan.

Sekarang ketika Anda menggunakan $scope.$applyAnda menghadapi kesalahan "Sudah dalam proses" sehingga cukup jelas bahwa $ digest sedang berjalan tetapi apa yang memicunya?

ans -> setiap $httppanggilan, semua ng-klik, ulangi, tampilkan, sembunyikan dll memicu $digestsiklus DAN BAGIAN TERBURUK JALAN SETIAP $ LINGKUP.

misalnya, laman Anda memiliki 4 pengontrol atau arahan A, B, C, D

Jika Anda memiliki 4 $scopeproperti di masing-masing properti, maka Anda memiliki total 16 $ properti cakupan di halaman Anda.

Jika Anda memicu $scope.$applydi pengontrol D maka a$digest siklus akan memeriksa semua 16 nilai !!! ditambah semua properti $ rootScope.

Jawaban -> tetapi $scope.$digestmemicu $digeston child dan cakupan yang sama sehingga hanya akan memeriksa 4 properti. Jadi jika Anda yakin bahwa perubahan D tidak akan mempengaruhi A, B, C maka gunakan $scope.$digest tidak $scope.$apply.

Jadi, sekadar ng-click atau ng-show / hide dapat memicu $digestsiklus pada lebih dari 100 properti bahkan ketika pengguna belum mengaktifkan peristiwa apa pun !

Gunakan $timeout, itu cara yang disarankan.

Skenario saya adalah saya perlu mengubah item pada halaman berdasarkan data yang saya terima dari WebSocket. Dan karena berada di luar Angular, tanpa batas waktu $, satu-satunya model yang akan diubah tetapi tampilan tidak akan berubah. Karena Angular tidak tahu bahwa bagian data telah diubah.$timeoutpada dasarnya memberi tahu Angular untuk membuat perubahan di babak $ digest berikutnya.

Saya mencoba yang berikut ini juga dan berhasil. Perbedaannya bagi saya adalah $ batas waktu lebih jelas.

setTimeout(function(){
    $scope.$apply(function(){
        // changes
    });
},0)

Saya menemukan solusi yang sangat keren:

.factory('safeApply', [function($rootScope) {
    return function($scope, fn) {
        var phase = $scope.$root.$$phase;
        if (phase == '$apply' || phase == '$digest') {
            if (fn) {
                $scope.$eval(fn);
            }
        } else {
            if (fn) {
                $scope.$apply(fn);
            } else {
                $scope.$apply();
            }
        }
    }
}])

menyuntikkan itu di mana Anda membutuhkan:

.controller('MyCtrl', ['$scope', 'safeApply',
    function($scope, safeApply) {
        safeApply($scope); // no function passed in
        safeApply($scope, function() { // passing a function in
        });
    }
])