2012-09-06 18 views
131

Tôi có sự kiện nhấp xảy ra ngoài phạm vi chỉ thị tùy chỉnh của mình, vì vậy thay vì sử dụng thuộc tính "ng-click", tôi đang sử dụng trình nghe jQuery.click() và gọi một hàm bên trong phạm vi của tôi như vậy:Làm cách nào tôi có thể yêu cầu AngularJS "làm mới"

$('html').click(function(e) { 
    scope.close(); 
); 

close() là một hàm đơn giản mà trông như thế này:

scope.close = function() { 
    scope.isOpen = false; 
} 

Theo quan điểm của tôi, tôi có một phần tử với "ng-show" ràng buộc to isOpen như thế này:

<div ng-show="isOpen">My Div</div> 

Khi gỡ lỗi, tôi thấy rằng close() đang được gọi, isOpen đang được cập nhật thành false, nhưng khung nhìn AngularJS không cập nhật. Có cách nào tôi có thể tự nói với Angular để cập nhật xem? Hay có cách tiếp cận "Góc cạnh" hơn để giải quyết vấn đề này mà tôi không thấy?

Trả lời

243

Giải pháp là để gọi ...

$scope.$apply(); 

... trong trường hợp callback jQuery tôi.

+9

Liên kết này sẽ hữu ích, tôi nghĩ vậy. http://jimhoskins.com/2012/12/17/angularjs-and-apply.html – sorx00

+6

không nên là '$ scope. $ Apply();'? – ErichBSchulz

+0

Bạn có thể sử dụng cả hai phạm vi $ hoặc phạm vi, nó chỉ là một sự khác biệt ký hiệu nhưng nó kết quả trong cùng một. – user1226868

10

Sử dụng

$route.reload(); 

nhớ để tiêm $route để điều khiển của bạn.

+1

Ngoài ra, khi sử dụng ui-router, hãy đảm bảo sử dụng '$ state.reload()' –

12

Tại sao phải gọi $apply?

TL; DR: $apply nên được gọi là bất cứ khi nào bạn muốn áp dụng thay đổi được thực ngoài của thế giới kiễu góc.


Chỉ cần cập nhật @Dustin's answer, đây là một lời giải thích của $apply chính xác không và tại sao nó hoạt động.

$apply() được sử dụng để thực hiện một biểu thức trong AngularJS từ bên ngoài khung AngularJS. (Ví dụ: từ các sự kiện DOM của trình duyệt, thư viện setTimeout, XHR hoặc bên thứ ba). Bởi vì chúng tôi đang gọi vào khung AngularJS, chúng tôi cần thực hiện vòng đời phạm vi thích hợp của exception handling, executing watches.

Góc cho phép bất kỳ giá trị nào được sử dụng làm mục tiêu ràng buộc. Sau đó, vào cuối bất kỳ mã JavaScript nào, nó sẽ kiểm tra xem giá trị đã thay đổi chưa. Bước đó kiểm tra xem có bất kỳ giá trị ràng buộc nào đã thay đổi thực sự có phương pháp hay không, $scope.$digest()1. Chúng tôi hầu như không bao giờ gọi trực tiếp, vì chúng tôi sử dụng $scope.$apply() thay thế (sẽ gọi $scope.$digest).

Góc chỉ giám sát các biến được sử dụng trong các biểu thức và bất kỳ thứ gì bên trong một số $watch nằm trong phạm vi.Vì vậy, nếu bạn đang thay đổi mô hình bên ngoài bối cảnh Góc, bạn sẽ cần phải gọi $scope.$apply() để những thay đổi này được nhân giống, nếu không Góc sẽ không biết rằng chúng đã bị thay đổi, do đó ràng buộc sẽ không được cập nhật 2.

+1

Đánh giá cao câu trả lời với giải thích. Cảm ơn bạn. – cheshireoctopus

Các vấn đề liên quan