เหตุใดจึงใช้ if (! $ scope. $$ phase) $ scope. $ apply () an anti-pattern?

Question 1

บางครั้งฉันจำเป็นต้องใช้$scope.$applyในโค้ดของฉันและบางครั้งก็แสดงข้อผิดพลาด "การสรุปข้อมูลที่กำลังดำเนินการอยู่" ดังนั้นผมจึงเริ่มที่จะหาทางรอบนี้และพบว่าคำถามนี้: AngularJS:. ป้องกันข้อผิดพลาด $ ย่อยแล้วในความคืบหน้าเมื่อโทร $ $ ขอบเขตใช้ () อย่างไรก็ตามในความคิดเห็น (และในวิกิเชิงมุม) คุณสามารถอ่าน:

อย่าทำถ้า (! $ scope. $$ phase) $ scope $ apply () หมายความว่า $ ขอบเขตของคุณ $ apply () ไม่สูงพอใน call stack

ตอนนี้ฉันมีสองคำถาม:

เหตุใดจึงเป็นรูปแบบการต่อต้าน?
ฉันจะใช้ $ scope อย่างปลอดภัย $ สมัครได้อย่างไร

"วิธีแก้ปัญหา" อื่นเพื่อป้องกันข้อผิดพลาด "ไดเจสต์กำลังดำเนินการอยู่" ดูเหมือนว่ากำลังใช้ $ timeout:

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

นั่นคือวิธีที่จะไป? ปลอดภัยกว่าไหม ดังนั้นนี่คือคำถามที่แท้จริง: ฉันจะสิ้นเชิงขจัดความเป็นไปได้ของข้อผิดพลาด "ย่อยแล้วในความคืบหน้า" หรือไม่?

PS: ฉันใช้ $ ขอบเขตเท่านั้น $ ใช้ในการเรียกกลับที่ไม่ใช่ angularjs ที่ไม่ซิงโครนัส (เท่าที่ฉันรู้ว่านั่นคือสถานการณ์ที่คุณต้องใช้ $ ขอบเขต $ ใช้ถ้าคุณต้องการนำการเปลี่ยนแปลงไปใช้)

Question 2

$scope.$applyหลังจากขุดบางมากขึ้นฉันก็สามารถที่จะแก้ปัญหาที่ว่าก็มักจะปลอดภัยในการใช้งาน คำตอบสั้น ๆ คือใช่

คำตอบยาว:

เนื่องจากวิธีการเบราว์เซอร์ของคุณรัน Javascript มันเป็นไปไม่ได้ว่าทั้งสองแยกแยะสายชนกันโดยบังเอิญ

โค้ด JavaScript ที่เราเขียนไม่ได้ทำงานทั้งหมดในคราวเดียว แต่จะดำเนินการแบบผลัดกัน แต่ละเทิร์นเหล่านี้ทำงานโดยไม่มีการควบคุมตั้งแต่ต้นจนจบและเมื่อเทิร์นกำลังทำงานจะไม่มีอะไรเกิดขึ้นในเบราว์เซอร์ของเรา (จากhttp://jimhoskins.com/2012/12/17/angularjs-and-apply.html )

ดังนั้นข้อผิดพลาด "สรุปแล้วอยู่ระหว่างดำเนินการ" สามารถเกิดขึ้นได้ในสถานการณ์เดียวเท่านั้น: เมื่อมีการออก $ apply ภายใน $ apply อื่นเช่น:

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

สถานการณ์นี้ไม่สามารถเกิดขึ้นได้หากเราใช้ $ scope.apply ในการเรียกกลับที่ไม่ใช่ angularjs ล้วน ๆ เช่นการเรียกกลับของsetTimeout. ดังนั้นรหัสต่อไปนี้จึงกันกระสุนได้ 100% และไม่จำเป็นต้องทำไฟล์if (!$scope.$$phase) $scope.$apply()

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

แม้สิ่งนี้จะปลอดภัย:

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

อะไรไม่ปลอดภัย (เพราะ $ timeout - เหมือนผู้ช่วย angularjs - เรียก$scope.$applyหาคุณแล้ว):

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

นอกจากนี้ยังอธิบายว่าเหตุใดการใช้if (!$scope.$$phase) $scope.$apply()จึงเป็นการต่อต้านรูปแบบ คุณไม่จำเป็นต้องใช้หากคุณใช้อย่าง$scope.$applyถูกต้อง: ในการเรียกกลับ js ที่บริสุทธิ์เช่นsetTimeoutตัวอย่างเช่น

อ่านhttp://jimhoskins.com/2012/12/17/angularjs-and-apply.htmlสำหรับคำอธิบายโดยละเอียดเพิ่มเติม

Question 3

ตอนนี้ต่อต้านรูปแบบแน่นอนที่สุด ฉันเคยเห็นไดเจสต์ระเบิดแม้ว่าคุณจะตรวจสอบเฟส $$ คุณไม่ควรเข้าถึง API ภายในที่แสดงโดย$$คำนำหน้า

คุณควรใช้

 $scope.$evalAsync();

เนื่องจากเป็นวิธีการที่ต้องการใน Angular ^ 1.4 และถูกเปิดเผยโดยเฉพาะเป็น API สำหรับเลเยอร์แอปพลิเคชัน

Question 4

ไม่ว่าในกรณีใดก็ตามเมื่อการสรุปย่อยของคุณอยู่ระหว่างดำเนินการและคุณกดบริการอื่นเพื่อแยกย่อยมันก็แสดงข้อผิดพลาดนั่นคือการสรุปย่อยที่กำลังดำเนินการอยู่ เพื่อรักษาสิ่งนี้คุณมีสองทางเลือก คุณสามารถตรวจสอบการแยกย่อยอื่น ๆ ที่อยู่ระหว่างดำเนินการเช่นการสำรวจความคิดเห็น

คนแรก

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

หากเงื่อนไขข้างต้นเป็นจริงคุณสามารถใช้ $ ขอบเขตของคุณได้ $ ใช้ otherwies ไม่ใช่และ

วิธีที่สองคือใช้ $ timeout

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

มันจะไม่ปล่อยให้ส่วนย่อยอื่น ๆ เริ่มต้นจนกว่า $ timeout จะเสร็จสิ้นการดำเนินการ

Question 5

scope.$applyทริกเกอร์$digestวัฏจักรซึ่งเป็นพื้นฐานของการผูกข้อมูลแบบ 2 ทาง

ก $digestการตรวจสอบวงจรสำหรับวัตถุเช่นรุ่น (จะแม่นยำ$watch) ที่ติดอยู่กับ$scopeการประเมินว่าค่าของพวกเขามีการเปลี่ยนแปลงและหากตรวจพบการเปลี่ยนแปลงแล้วจะใช้เวลาในขั้นตอนที่จำเป็นในการปรับปรุงมุมมอง

ตอนนี้เมื่อคุณใช้ $scope.$applyคุณต้องเผชิญกับข้อผิดพลาด "อยู่ระหว่างดำเนินการ" ดังนั้นจึงค่อนข้างชัดเจนว่าการสรุป $ กำลังทำงานอยู่ แต่อะไรเป็นสาเหตุ

ans -> ทุกการ$httpโทร, คลิกทั้งหมด, ทำซ้ำ, แสดง, ซ่อนและอื่น ๆ จะทำให้เกิด$digestวงจรและส่วนที่แย่ที่สุดมันทำงานของทุกขอบเขต $

กล่าวคือหน้าของคุณมีตัวควบคุม 4 ตัวหรือคำสั่ง A, B, C, D

ถ้าคุณมี 4 $scopeคุณสมบัติในแต่ละคุณสมบัติคุณจะมีคุณสมบัติขอบเขต $ 16 ทั้งหมดในเพจของคุณ

หากคุณทริกเกอร์$scope.$applyในคอนโทรลเลอร์ D แล้ว a$digestวงจรจะตรวจสอบค่าทั้งหมด 16 ค่า !!! บวกคุณสมบัติ $ rootScope ทั้งหมด

คำตอบ ->แต่$scope.$digestทริกเกอร์$digestบนลูกและขอบเขตเดียวกันดังนั้นจะตรวจสอบคุณสมบัติ 4 อย่างเท่านั้น ดังนั้นหากคุณแน่ใจว่าการเปลี่ยนแปลงใน D จะไม่มีผลต่อ A, B, C ให้ใช้$scope.$diges$scope.$applyเสื้อไม่ได้

ดังนั้นเพียงแค่ ng-click หรือ ng-show / hide อาจทำให้เกิด$digestวงจรในคุณสมบัติมากกว่า 100+ แม้ว่าผู้ใช้จะไม่ได้เริ่มเหตุการณ์ใด ๆ ก็ตาม !

Question 6

ใช้$timeoutเป็นวิธีที่แนะนำ

สถานการณ์ของฉันคือฉันต้องเปลี่ยนรายการบนเพจตามข้อมูลที่ฉันได้รับจาก WebSocket และเนื่องจากมันอยู่นอก Angular โดยไม่มี $ timeout โมเดลเดียวจะถูกเปลี่ยน แต่ไม่ใช่มุมมอง เนื่องจาก Angular ไม่ทราบว่ามีการเปลี่ยนแปลงข้อมูล$timeoutโดยพื้นฐานแล้วจะบอกให้ Angular ทำการเปลี่ยนแปลงในรอบถัดไปของ $ Dig

ฉันลองทำสิ่งต่อไปนี้แล้วและได้ผล ความแตกต่างสำหรับฉันคือ $ timeout นั้นชัดเจนกว่า

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

Question 7

ฉันพบวิธีแก้ปัญหาที่ยอดเยี่ยมมาก:

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

ฉีดในที่ที่คุณต้องการ:

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