AngularJS: ป้องกันข้อผิดพลาดในการแยกย่อย $ ที่กำลังดำเนินอยู่เมื่อมีการโทรขอบเขต $ $ ใช้ ()

ฉันพบว่าฉันต้องอัปเดตหน้าเว็บของฉันเป็นขอบเขตด้วยตนเองมากขึ้นเรื่อย ๆ นับตั้งแต่สร้างแอปพลิเคชันเป็นมุม

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

ข้อผิดพลาด: กำลังสรุป $ กำลังดำเนินการอยู่

ไม่มีใครรู้วิธีหลีกเลี่ยงข้อผิดพลาดนี้หรือทำสิ่งเดียวกัน แต่แตกต่างกัน?

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

คุณสามารถตรวจสอบว่ามีอยู่แล้วในความคืบหน้าการตรวจสอบโดย$digest$scope.$$phase

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

$scope.$$phaseจะส่งคืน"$digest"หรือ"$apply"ถ้า a $digestหรือ$applyกำลังดำเนินการอยู่ ฉันเชื่อว่าความแตกต่างระหว่างรัฐเหล่านี้คือการที่$digestจะประมวลผลนาฬิกาของขอบเขตปัจจุบันและลูก ๆ ของมันและ$applyจะประมวลผลผู้เฝ้าดูของขอบเขตทั้งหมด

ถึงจุดของ @ dnc253 หากคุณพบว่าตัวเองโทรมา$digestหรือ$applyบ่อยครั้งคุณอาจทำผิด ฉันมักจะพบว่าฉันจำเป็นต้องแยกแยะเมื่อฉันต้องการอัปเดตสถานะของขอบเขตเนื่องจากเหตุการณ์ DOM ที่เริ่มทำงานนอกขอบเขตของ Angular ตัวอย่างเช่นเมื่อ modal bootstrap twitter ถูกซ่อน บางครั้งเหตุการณ์ DOM เริ่มเมื่อ a $digestอยู่ระหว่างดำเนินการ นั่นเป็นเหตุผลที่ฉันใช้เช็คนี้

ฉันชอบที่จะรู้วิธีที่ดีกว่าถ้าใครรู้

จากความคิดเห็น: โดย @anddoutoi

รูปแบบการต่อต้าน angular.js

2. อย่าทำif (!$scope.$$phase) $scope.$apply()มันหมายความว่าคุณ$scope.$apply()ยังไม่สูงพอในสแต็กการโทร

จากการสนทนาเมื่อเร็ว ๆ นี้กับ Angular guys ในหัวข้อนี้: สำหรับเหตุผลการพิสูจน์ในอนาคตคุณไม่ควรใช้$$phase

เมื่อกดสำหรับวิธี "ถูกต้อง" คำตอบคือตอนนี้

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

เมื่อเร็ว ๆ นี้ฉันพบปัญหานี้เมื่อเขียนบริการเชิงมุมเพื่อรวม facebook, google และ twitter APIs ซึ่งมีองศาที่แตกต่างกัน

นี่คือตัวอย่างจากภายในบริการ (เพื่อความกะทัดรัด, ส่วนที่เหลือของบริการ - ที่ตั้งค่าตัวแปร, การฉีด $ หมดเวลา ฯลฯ - ถูกทิ้งไว้)

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

โปรดทราบว่าอาร์กิวเมนต์การหน่วงเวลาสำหรับ $ หมดเวลาเป็นตัวเลือกและจะใช้ค่าเริ่มต้นเป็น 0 หากไม่ได้ตั้งค่า ( $ หมดเวลาเรียกใช้$ browser.deferซึ่งค่าเริ่มต้นเป็น 0 หากไม่ได้ตั้งค่าการหน่วงเวลา )

เล็ก ๆ น้อย ๆ ที่ไม่ได้ใช้งานง่าย แต่นั่นเป็นคำตอบจากพวกที่เขียน Angular ดังนั้นมันดีพอสำหรับฉัน!

วงจรย่อยคือการโทรแบบซิงโครนัส มันจะไม่ให้การควบคุมเหตุการณ์วนรอบของเบราว์เซอร์จนกว่าจะเสร็จสิ้น มีสองสามวิธีในการจัดการกับสิ่งนี้ วิธีที่ง่ายที่สุดในการจัดการกับสิ่งนี้คือการใช้ $ timeout ในตัวและวิธีที่สองคือหากคุณใช้เครื่องหมายขีดล่างหรือ Lodash (และคุณควรจะเป็น) ให้เรียกสิ่งต่อไปนี้:

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

หรือถ้าคุณมี lodash:

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

เราลองวิธีแก้ปัญหาหลายอย่างและเราเกลียดการฉีด $ rootScope ลงในตัวควบคุมทิศทางและแม้แต่โรงงานบางแห่งของเรา ดังนั้นการหมดเวลาของ $ และ _.defer จึงเป็นสิ่งที่เราโปรดปราน วิธีการเหล่านี้ประสบความสำเร็จในการบอกเชิงมุมให้รอจนกระทั่งภาพเคลื่อนไหววนรอบถัดไปซึ่งจะรับประกันว่าขอบเขตปัจจุบันการใช้ $ จะจบลงแล้ว

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

สิ่งที่คุณควรรู้

• $$phase เป็นกรอบส่วนตัวและมีเหตุผลที่ดีสำหรับสิ่งนั้น

• $timeout(callback)จะรอจนกว่าปัจจุบันย่อยวงจร (ถ้ามี) $applyจะทำจากนั้นดำเนินการเรียกกลับทำงานแล้วในตอนท้ายเต็ม

• $timeout(callback, delay, false)จะทำเช่นเดียวกัน (โดยมีการหน่วงเวลาเป็นตัวเลือกก่อนดำเนินการติดต่อกลับ) แต่จะไม่ดำเนินการ$apply(อาร์กิวเมนต์ที่สาม) ซึ่งจะบันทึกการทำงานหากคุณไม่ได้แก้ไขโมเดลเชิงมุม (ขอบเขต $)

• $scope.$apply(callback)จะเรียกใช้งานในสิ่งอื่น ๆ$rootScope.$digestซึ่งหมายความว่ามันจะ redigest ขอบเขตของแอปพลิเคชันและลูก ๆ ของมันใหม่แม้ว่าคุณจะอยู่ในขอบเขตที่แยกจากกัน

• $scope.$digest()จะซิงค์โมเดลของมันกับมุมมอง แต่จะไม่แยกย่อยขอบเขตของพาเรนต์ซึ่งสามารถบันทึกการแสดงจำนวนมากเมื่อทำงานกับส่วนที่แยกต่างหากของ HTML ของคุณด้วยขอบเขตแยก (จากคำสั่งส่วนใหญ่) $ digest ไม่ใช้การเรียกกลับ: คุณเรียกใช้รหัสจากนั้นทำการแยกย่อย

• $scope.$evalAsync(callback)ได้รับการแนะนำให้รู้จักกับ angularjs 1.2 และอาจจะแก้ปัญหาส่วนใหญ่ของคุณ โปรดอ้างอิงถึงย่อหน้าสุดท้ายเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับเรื่องนี้

• หากคุณได้รับ$digest already in progress errorแล้วสถาปัตยกรรมของคุณผิด: คุณไม่จำเป็นต้อง redigest ขอบเขตของคุณหรือคุณไม่ควรรับผิดชอบ (ดูด้านล่าง)

วิธีจัดโครงสร้างรหัสของคุณ

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

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

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

อัปเดตตั้งแต่ Angularjs 1.2

ใหม่วิธีการที่มีประสิทธิภาพได้รับการเพิ่ม $ $evalAsyncขอบเขตใด โดยพื้นฐานแล้วมันจะทำการเรียกกลับภายในวงจรย่อยปัจจุบันถ้าเกิดขึ้นไม่เช่นนั้นวงจรย่อยใหม่จะเริ่มดำเนินการเรียกกลับ

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

ในกรณีเหล่านี้และอื่น ๆ ทั้งหมดที่คุณมีให้!$scope.$$phaseแน่ใจว่าได้ใช้$scope.$evalAsync( callback )

วิธีการช่วยเหลือตัวเล็กที่มีประโยชน์เพื่อให้กระบวนการนี้แห้ง:

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

ฉันมีปัญหาเดียวกันกับสคริปต์ของบุคคลที่สามเช่น CodeMirror เช่นและ Krpano และแม้แต่การใช้วิธีการที่ปลอดภัยที่กล่าวถึงที่นี่ยังไม่ได้แก้ไขข้อผิดพลาดสำหรับฉัน

แต่สิ่งที่แก้ไขได้คือใช้บริการ $ timeout (อย่าลืมอัดไว้ก่อน)

ดังนั้นสิ่งที่ชอบ:

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

และถ้าภายในรหัสของคุณคุณกำลังใช้

นี้

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

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

  }]
)

ดูhttp://docs.angularjs.org/error/$rootScope:inprog

ปัญหาเกิดขึ้นเมื่อคุณมีการเรียกไป$applyที่บางครั้งเรียกใช้แบบอะซิงโครนัสนอกรหัส Angular (เมื่อใช้ $ Apply ควรใช้) และบางครั้งจะซิงโครไนซ์ภายในโค้ด Angular (ซึ่งทำให้เกิด$digest already in progressข้อผิดพลาด)

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

วิธีป้องกันข้อผิดพลาดนี้คือเพื่อให้แน่ใจว่ารหัสที่เรียก$applyใช้นั้นทำงานแบบอะซิงโครนัส สิ่งนี้สามารถทำได้โดยการเรียกใช้รหัสของคุณภายในการโทร$timeoutด้วยโดยตั้งค่าการหน่วงเวลาเป็น0(ซึ่งเป็นค่าเริ่มต้น) อย่างไรก็ตามการเรียกรหัสของคุณภายใน$timeoutนั้นไม่จำเป็นต้องโทรออก$applyเพราะการหมดเวลา $ จะทำให้เกิด$digestรอบใหม่ด้วยตัวเองซึ่งในทางกลับกันจะทำการอัพเดตที่จำเป็นทั้งหมดและอื่น ๆ

สารละลาย

ในระยะสั้นแทนที่จะทำสิ่งนี้:

... your controller code...

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

... more of your controller code...

ทำเช่นนี้:

... your controller code...

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

... more of your controller code...

โทรเฉพาะ$applyเมื่อคุณรู้ว่ารหัสที่ใช้มันจะถูกเรียกใช้นอกรหัส Angular เสมอ (เช่นการเรียกใช้ $ ของคุณจะเกิดขึ้นภายในการเรียกกลับที่ถูกเรียกโดยรหัสนอกรหัส Angular ของคุณ)

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

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

รูปแบบความปลอดภัยที่สั้นที่สุด$applyคือ:

$timeout(angular.noop)

คุณยังสามารถใช้ evalAsync มันจะทำงานบางครั้งหลังจากเสร็จสิ้นการย่อย!

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

ก่อนอื่นอย่าแก้ไขด้วยวิธีนี้

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

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

ใช้แทน $timeout

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

หากคุณใช้เครื่องหมายขีดล่างหรือ Lodash คุณสามารถใช้ defer ():

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

บางครั้งคุณจะยังคงได้รับข้อผิดพลาดหากคุณใช้วิธีนี้ ( https://stackoverflow.com/a/12859093/801426 )

ลองสิ่งนี้:

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

คุณควรใช้ $ evalAsync หรือ $ timeout ตามบริบท

นี่คือลิงค์พร้อมคำอธิบายที่ดี:

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

ลองใช้

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

แทน

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

$ ApplyAsync กำหนดเวลาการเรียกใช้ $ จะเกิดขึ้นในภายหลัง สิ่งนี้สามารถใช้เพื่อจัดคิวหลายนิพจน์ซึ่งจำเป็นต้องประเมินในไดเจสต์เดียวกัน

หมายเหตุ: ภายใน $ digest, $ ApplyAsync () จะล้างออกเฉพาะเมื่อขอบเขตปัจจุบันคือ $ rootScope ซึ่งหมายความว่าถ้าคุณเรียกใช้ $ แยกย่อยในขอบเขตลูกมันจะไม่ล้างโดยปริยายคิว $ ApplyAsync ()

Exmaple:

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

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

อ้างอิง:

1. Scope. $ ApplyAsync () กับ Scope. $ evalAsync () ใน AngularJS 1.3

2. เอกสาร AngularJs

ฉันอยากจะแนะนำให้คุณใช้เหตุการณ์ที่กำหนดเองแทนการทริกเกอร์วงจรย่อย

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

โดยการสร้างเหตุการณ์ที่กำหนดเองคุณจะมีประสิทธิภาพมากขึ้นด้วยรหัสของคุณเพราะคุณเป็นเพียงการกระตุ้นให้ผู้ฟังที่สมัครเป็นสมาชิกของเหตุการณ์ดังกล่าวและไม่เรียกนาฬิกาทั้งหมดที่ถูกผูกไว้กับขอบเขตเช่นเดียวกับถ้าคุณเรียกใช้ขอบเขต

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


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

yearofmoo ทำงานได้อย่างยอดเยี่ยมในการสร้างฟังก์ชั่น $ safeApply สำหรับเรา:

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

การใช้งาน:

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

ฉันได้รับสามารถที่จะแก้ปัญหานี้โดยการเรียก$evalแทน$applyในสถานที่ที่ฉันรู้ว่า$digestฟังก์ชั่นจะทำงาน

ตามเอกสารนั้น$applyโดยทั่วไปแล้วสิ่งนี้:

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

ในกรณีของการng-clickเปลี่ยนแปลงตัวแปรภายในขอบเขตและ $ นาฬิกาในตัวแปรที่มีการเปลี่ยนแปลงตัวแปรอื่น ๆ $appliedซึ่งจะต้องมีการ ขั้นตอนสุดท้ายนี้ทำให้เกิดข้อผิดพลาด "สรุปย่อกำลังดำเนินการอยู่"

โดยการแทนที่$applyด้วย$evalภายในแสดงออกนาฬิกาตัวแปรขอบเขตได้รับการปรับปรุงคาดว่าเป็น

ดังนั้นดูเหมือนว่าหากการแยกย่อยกำลังจะดำเนินการต่อไปเนื่องจากมีการเปลี่ยนแปลงอื่น ๆ ภายใน Angular $evalคุณจำเป็นต้องทำทุกอย่าง

ใช้$scope.$$phase || $scope.$apply();แทน

การทำความเข้าใจว่าเอกสารเชิงมุมโทรตรวจสอบต่อต้านรูปแบบที่ผมพยายามที่จะได้รับและ$$phase$timeout_.deferทำงาน

วิธีการหมดเวลาและรอการตัดบัญชีสร้างแฟลชของ{{myVar}}เนื้อหาที่ไม่ได้แยกวิเคราะห์ในโดมเช่นFOUT foutสำหรับฉันนี้ไม่เป็นที่ยอมรับ มันทำให้ฉันไม่ต้องบอกอะไรมากเกี่ยวกับสิ่งที่ดื้อรั้นและไม่มีทางเลือกที่เหมาะสม

สิ่งเดียวที่ทำงานได้ทุกครั้งคือ:

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

ฉันไม่เข้าใจถึงอันตรายของวิธีนี้หรือทำไมมันจึงถูกอธิบายว่าเป็นการแฮ็คโดยผู้คนในความคิดเห็นและทีมเชิงมุม คำสั่งดูเหมือนแม่นยำและอ่านง่าย:

"ทำการแยกข้อมูลยกเว้นว่ามีเหตุการณ์เกิดขึ้นแล้ว"

ใน CoffeeScript มันยอดเยี่ยมกว่า:

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

มีปัญหาอะไรกับเรื่องนี้? มีทางเลือกอื่นที่จะไม่สร้าง FOUT หรือไม่? $ safeApplyดูดี แต่ใช้$$phaseวิธีการตรวจสอบด้วย

นี่คือบริการ utils ของฉัน:

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

และนี่คือตัวอย่างสำหรับการใช้งาน:

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

ฉันใช้วิธีนี้และดูเหมือนว่าจะทำงานได้อย่างสมบูรณ์แบบ apply()เพียงแค่นี้ก็รอเวลารอบได้เสร็จสิ้นแล้วทริกเกอร์ เพียงแค่เรียกใช้ฟังก์ชั่นapply(<your scope>)จากทุกที่ที่คุณต้องการ

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

เมื่อฉันปิดการใช้งานดีบักเกอร์ข้อผิดพลาดจะไม่เกิดขึ้นอีก ในกรณีของฉันมันเป็นเพราะ debugger หยุดการเรียกใช้โค้ด

คล้ายกับคำตอบข้างต้น แต่สิ่งนี้ได้ผลสำหรับฉัน ... ในการบริการเพิ่ม:

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

คุณสามารถใช้ได้

$timeout

เพื่อป้องกันข้อผิดพลาด

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

โดยทั่วไปปัญหาจะมาเมื่อเรากำลังขอให้เชิงมุมเรียกใช้วัฏจักรการย่อยแม้ว่ามันจะอยู่ในกระบวนการซึ่งกำลังสร้างปัญหาให้เชิงมุมเพื่อทำความเข้าใจ ข้อยกเว้นที่ตามมาในคอนโซล
1. ไม่มีความหมายใด ๆ ในการเรียกใช้ขอบเขต $ Apply () ภายในฟังก์ชัน $ timeout เพราะภายในจะทำเช่นเดียวกัน
2. โค้ดจะไปพร้อมกับฟังก์ชั่นของ vanilla JavaScript เพราะมันไม่ได้เป็นเชิงมุมที่กำหนดไว้เช่น setTimeout
3. ในการทำเช่นนั้นคุณสามารถใช้

if (! scope. $$ phase) {
scope. $ evalAsync (function () {

}); }

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

นี่เป็นทางออกที่ดีในการหลีกเลี่ยงข้อผิดพลาดนี้และหลีกเลี่ยงการใช้ $

คุณสามารถรวมสิ่งนี้กับ debounce (0) ถ้าโทรตามเหตุการณ์ภายนอก ด้านบนคือ 'debounce' ที่เราใช้และตัวอย่างเต็มของรหัส

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

และโค้ดของตัวเองเพื่อรับฟังเหตุการณ์บางอย่างและเรียก $ digest เพียงแค่ $ scope ที่คุณต้องการ

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

พบสิ่งนี้: https://coderwall.com/p/ngismaโดยที่ Nathan Walker (ใกล้ด้านล่างของหน้า) แนะนำมัณฑนากรใน $ rootScope เพื่อสร้าง func 'safeApply' รหัส:

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

นี่จะเป็นการแก้ปัญหาของคุณ:

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