Phạm vi $ góc sẽ không cập nhật trong gọi lại hộp thư thoại

Question

Đây là câu hỏi đầu tiên của tôi về SO.

Khi tôi ghép nối một phần tử của một mảng trên phạm vi, thay đổi đó không được phản ánh, khi được thực hiện trong hàm gọi lại của bootbox.js.

trình:

$scope.deleteA = function() { 
    if (confirm("Really delete Item 3?")) { 
     $scope.itemsA.splice(2, 1); 
    } 
} 

Không làm việc:

$scope.deleteB = function() { 
    bootbox.confirm("Really delete Item 3?", function(answer) { 
     if (answer === true) { 
     $scope.itemsB.splice(2, 1); 
     } 
    }); 
} 

tôi chủ yếu quan tâm đến việc tìm hiểu lý do tại sao . Điều này quan trọng hơn đối với tôi hơn là giải pháp lạ mắt.

I created a Plunker to show the effect

Answer 1

Bất kỳ sự thay đổi xảy ra với biến phạm vi góc từ thế giới ouside của góc, không thân mật hệ thống góc tiêu hóa để chạy tiêu hóa chu kỳ để cập nhật ràng buộc.
Trong bootbox góc gọi lại không biết rằng có gì đó thay đổi, đó là lý do tại sao không cập nhật chế độ xem.
Để giải quyết vấn đề này, bạn cần phải khởi chu kỳ tiêu hóa bằng tay bằng cách sử dụng $apply method, hoặc $timeout service, như

bootbox.confirm("Really delete Item 3?", function(answer) { 
    if (answer === true) { 
    $scope.$apply(function(){ 
     $scope.itemsB.splice(2, 1); 
    }); 
    } 
}); 

Answer 2

phương pháp an toàn này để áp dụng thay đổi phạm vi sẽ sử dụng $timeout dịch vụ.

bootbox.confirm("Really delete Item 3?", function(answer) { 
    if (answer === true) { 
    $timeout($scope.itemsB.splice(2, 1)); 
    } 
}); 

Vì vậy, bạn không cần phải lo lắng về $digest pha và $apply của bạn sẽ là một cuộc gọi cao chồng hãy nhìn vào https://github.com/angular/angular.js/wiki/Anti-Patterns điểm -2.

Đừng làm nếu (! $ Scope. $$ phase) $ scope. $ Apply(), có nghĩa là phạm vi $ $. $ Apply() không đủ cao trong ngăn xếp cuộc gọi.