Cách sử dụng dịch vụ tài liệu $ trong angularJS?

Question

Tôi rất mới với angularJS trong JS nói chung và tôi là một chút bối rối về việc sử dụng tài liệu $. Theo những gì tôi hiểu $ tài liệu cho thấy một số chức năng JQuery. Vì vậy, khi tôi muốn xóa phần tử phù hợp với công cụ chọn, tôi thực hiện việc này:

$document.remove('.someClassSelector'); 

và phần tử này phải được xóa khỏi cây DOM, phải không? Nếu không phải là cách chính xác để thao tác các yếu tố DOM và css của họ trong góc là gì.

Answer 1

AngularJS nhúng phiên bản lite của Jquery (jqLite).

Nếu bạn muốn sử dụng jqLite chỉ (không nhúng jquery), bạn có thể làm như sau để loại bỏ các yếu tố:

angular.element(yourElement).remove() 

$document là một phím tắt jqLite để window.document

Xem: docs.angularjs.org/api/angular.element

Answer 2

Cách "góc cạnh" phổ biến hơn để ẩn/hiển thị các phần tử DOM là sử dụng các chỉ thị ngHide và/hoặc ngShow - "khai báo" chúng trong HTML của bạn (do đó tuyên bố này về các Overview page:

góc được xây dựng xung quanh niềm tin rằng mã khai báo là tốt hơn hơn bắt buộc khi nói đến xây dựng UI và phần mềm hệ thống dây điện thành phần với nhau

Tương tự, để thêm/gỡ bỏ các lớp CSS, sử dụng chỉ thị ngClass theo cách khai báo. Các thay đổi đối với các mô hình của bạn (tức là các thuộc tính phạm vi $) sẽ thúc đẩy việc ẩn/hiện và thêm/xóa các lớp CSS.

Nếu bạn cần một cái gì đó phức tạp hơn, hãy đặt thao tác DOM vào tùy chỉnh directives, thông thường trong hàm liên kết.

Trong thế giới jQuery, chúng tôi nghĩ về các sự kiện kích hoạt mã thao tác DOM (ví dụ: gọi remove() trên một số phần tử). Trong thế giới AngularJS, chúng tôi muốn suy nghĩ về các sự kiện kích hoạt thay đổi mô hình, sau đó kích hoạt tự động thay đổi giao diện người dùng, dựa trên HTML khai báo của chúng tôi (ví dụ: ng-click đặt thuộc tính $ scope được gắn với ng-show trên phần tử). Tôi vẫn đang điều chỉnh suy nghĩ của mình.

Đối với hầu hết các ứng dụng AngularJS, bạn sẽ không cần sử dụng $ document.