Sự khác biệt giữa ng-ràng buộc và ng-cloak trong angularjs

Question

Trong câu hỏi này why ng-bind is better than {{}} in angular? Tôi hiểu sự khác biệt giữa {{}} và ng-bind. Mặt khác, tôi có thể sử dụng ng-cloak thay vì ng-bind.

Bây giờ câu hỏi của tôi là sự khác biệt giữa ng-bind và ng-cloak là gì?

Answer 1

Họ làm công việc giống nhau tương đối.

Nhìn vào tài liệu api, bạn có thể tìm thấy chúng chính xác là gì.

ngCloak

Chỉ thị ngCloak được sử dụng để ngăn chặn các template html góc từ được hiển thị một thời gian ngắn bởi trình duyệt ở dạng thô (uncompiled) của nó trong khi ứng dụng của bạn đang tải. Sử dụng chỉ thị này để tránh hiệu ứng nhấp nháy không mong muốn do hiển thị mẫu html gây ra.

Chỉ thị ng-áo choàng là một built-in chỉ thị góc mà giấu đi tất cả các yếu tố trên trang đó chứa các chỉ thị.

<div ng-cloak> 
<h1>Hello {{ foo }}</h1> 
</div> 

Sau khi trình duyệt được thực hiện tải và giai đoạn biên dịch của mẫu là vẽ, góc cạnh sẽ xóa các thuộc tính nguyên tố ngCloak và các yếu tố sẽ trở nên nhìn thấy được.

ngBind

Thuộc tính ngBind nói với góc để thay thế cho nội dung văn bản của phần tử HTML được chỉ định với giá trị của một biểu thức nào đó, và để cập nhật các nội dung văn bản khi giá trị của những thay đổi biểu hiện.

Sử dụng ng-bind thay vì {{ }} sẽ ngăn chặn sự unrendered {{ }} hiển thị lên thay vì các yếu tố có sản phẩm nào được trả lại.Ví dụ từ trên có thể được viết lại để sau đó sẽ ngăn chặn trang từ nhấp nháy với {{ }}:

<div> 
<h1>Hello <span ng-bind="foo"></span></h1> 
</div> 

Answer 2

Khi bạn sử dụng ng-ràng buộc, trình duyệt không bỏ qua điều này trong khi sau khi góc được tải, nó liên kết giá trị trong dạng xem.

Mặc dù nếu bạn sử dụng ng-cloak, {{}} sẽ vẫn xuất hiện trong một thời gian ngắn, nhưng ngay khi góc được tải và phân tích cú pháp, nó sẽ bỏ {{}} cho đến khi biên dịch diễn ra.

Answer 3

Từ tài liệu

Chỉ thị ngCloak được sử dụng để ngăn chặn sự html Góc mẫu từ được hiển thị một thời gian ngắn bởi trình duyệt trong thô (uncompiled) hình thức của nó trong khi ứng dụng của bạn đang tải. Sử dụng chỉ thị này để tránh hiệu ứng nhấp nháy không mong muốn do hiển thị mẫu html gây ra.

https://docs.angularjs.org/api/ng/directive/ngCloak

Answer 4

Bạn có thể tra cứu những thứ như thế trong Documents Api góc.

ng-cloak chỉ là quy tắc css đặt kiểu thành display: none !important để biểu thức {{}} của bạn không hiển thị cho đến khi được thay thế bằng dữ liệu thực tế. https://docs.angularjs.org/api/ng/directive/ngCloak

Trong khi ng-bind là một biểu thức.

Answer 5

Trong ý nghĩa thực tế, nếu bạn chuyển mô hình của mình vào chế độ xem từ máy chủ, thì ng-cloak là tốt - khi trang hiển thị, dữ liệu chế độ xem của bạn được điền. Tuy nhiên, nếu bạn đang sử dụng cách tiếp cận thân thiện với thiết bị di động hơn để tải html và tải dữ liệu của mình và có thể bản địa hóa bằng một cuộc gọi bổ sung, thì mô hình ng sẽ ngăn {{}} nhấp nháy giữa khi trang của bạn tải và dữ liệu của bạn đến. Tuy nhiên, tôi thấy ng-mô hình không đủ vì nó không thể được sử dụng phổ biến, vì vậy tôi thường đặt một ng-show trên một container để lộ ra khung nhìn sau khi dữ liệu đã được lấy ra và một lá cờ đã được thiết lập.