Angularjs: Tìm tất cả các trường hợp của chỉ thị

Question

Tôi đang cố gắng tạo chỉ thị để cho phép người dùng điều hướng trang bằng các phím mũi tên theo phần. Nhưng tôi cũng muốn để có thể có những phần được rải rác xung quanh dom, và để có điều này không phá vỡ khi công cụ được thêm vào và gỡ bỏ. Tôi có thể nghĩ ra một số cách để thực hiện việc này, nhưng không có cách nào trong số đó là thỏa đáng:

• Tạo chỉ thị với bộ điều khiển cho phép các chỉ thị khác tự đăng ký (và hủy đăng ký hủy $). Nhưng điều này sẽ hết trật tự nếu tôi thêm thứ gì đó vào giữa lúc sau. Ngoài ra, tôi đã cố gắng viết nó theo cách này, và nó có vẻ như cách mã nhiều hơn cần thiết.

• Bất cứ khi nào người dùng nhấn phím mũi tên, tạo một mảng trống và $ phát một sự kiện, với lời gọi lại để chỉ thị đăng ký trên danh sách đó. Sau đó, khi danh sách đó đầy, hãy tiến lên hoặc lùi lại trên danh sách đó. Họ (nên?) Trở lại theo thứ tự họ đang ở trên DOM, nhưng tôi không chắc chắn vì cách này có vẻ điên rồ và hung dữ.

• Đánh dấu những thứ có 'tabbable' bằng css và viết một cách đơn giản trong jquery, như sau: Trên sự kiện nhấp chuột mới, var all = $('.tabbable') và sau đó làm rõ ràng với điều đó. Nhưng tôi thực sự không muốn làm theo cách đó, bởi vì nó không phải là 'góc cạnh'. Không phải vì một số ý nghĩa thuần khiết, nhưng bởi vì tôi đang xây dựng nó như một phần của một thư viện vật dụng lớn hơn, và tôi muốn chức năng này có thể truy cập được với chúng.

Vì vậy, có cách nào để tôi có được phạm vi của tất cả các chỉ thị của một loại nhất định, mà không phải dùng đến các hacks lạ hoặc truyền logic ra khắp nơi?

Answer 1

AngularJS services là những người độc thân và có thể được yêu cầu thông qua tiêm phụ thuộc. Bạn có thể có chỉ thị của bạn yêu cầu một dịch vụ quản lý nhà nước và tăng/giảm cuộc gọi.

Ngoài ra, dễ hơn một chút nhưng dễ vỡ hơn, bạn có thể giữ một mảng trong $ rootScope. Đó là thành ngữ hơn "góc cạnh" (nhưng không nhiều) so với một bộ chọn jquery toàn cầu, nhưng có lẽ không phải là tuyến đường tốt nhất nếu bạn đang xây dựng một thư viện widget.

Answer 2

Đây là một câu hỏi hay. +1

Trước tiên, việc tìm tất cả các chỉ thị hoặc nút theo loại sẽ đi ngược lại theo cách Góc. Xem là hồ sơ chính thức trong AngularJS, vì vậy chỉ thị nên nói những gì họ làm và làm những gì họ nói. Mã hóa một số quy trình ở đâu đó để quét các nút DOM và hành động tương ứng là có vấn đề vì nhiều lý do, không phải ít nhất là tách các mối quan tâm và khả năng kiểm thử.

Tôi rất vui khi thấy bạn đang xem xét các tùy chọn khác, nhưng tôi đồng ý rằng các tùy chọn khác mà bạn cung cấp là không tối ưu vì những lý do bạn đã đề cập. Nhưng tôi có một cái nữa. Đây là cái mà tôi đã sử dụng cho một ứng dụng khác, nhưng đó là kiến ​​thức cần thiết về các nút DOM rải rác.

Trước tiên, chúng tôi tạo một dịch vụ để quản lý trạng thái của thành phần này. Thật đơn giản. Hãy gọi nó là SectionsService. Tiếp theo, chúng ta tạo ra một chỉ thị để đăng ký các phần. Hãy gọi đó là section để đơn giản. Chỉ thị section đăng ký ID của nút DOM (có thể được tạo theo chương trình để đảm bảo tính duy nhất) với SectionsService trong giai đoạn liên kết của nó. Vì DOM được xử lý (chủ yếu) theo thứ tự, các nút được thêm vào SectionsService cũng sẽ theo thứ tự.Vì vậy, các DOM trông giống như sau (thứ không liên quan bỏ qua):

<div section>...</div> 

<!-- other stuff --> 

<div section>...</div> 

<!-- other stuff --> 

<!-- etc. --> 

(Mặc dù ra khỏi phạm vi ở đây, nó sẽ không thể rất khó để chương trình nó theo cách như vậy mà thứ tự sẽ không quan trọng, nhưng nó được dựa trên các chi tiết cụ thể về ứng dụng của bạn mà tôi không biết.)

Tiếp theo, bạn tạo trình kích hoạt, như trình xử lý khóa mũi tên. Trên những sự kiện này, bạn chỉ cần nói cho các SectionService để đi đến nút trước đó/tiếp theo trong danh sách. AngularJS đi kèm với một dịch vụ gọi là $anchorScroll có thể được sử dụng để mô phỏng vị trí dựa trên băm của trình duyệt mà chúng tôi đã quen thuộc. Bạn rõ ràng có thể sử dụng một plugin jQuery để tạo hiệu ứng cuộn nếu bạn muốn.

Và đó là nó! Một chỉ thị rất đơn giản, một dịch vụ khá đơn giản và bất kỳ trình kích hoạt nào bạn cần. Tất cả đã nói, tôi đoán ít hơn 100 dòng mã bao gồm các bài kiểm tra. Tất cả các thành phần được tách rời và dễ dàng kiểm tra, nhưng vẫn thực sự khá đơn giản. Quan điểm vẫn là Sự thật. Đường góc được bảo tồn.

Và có rất nhiều sự vui mừng.

---

Tôi hy vọng điều này giúp bạn đi đúng hướng, nhưng tất nhiên bạn có thể tự do hỏi một câu hỏi tiếp theo. Chúng tôi cũng có thể nói cụ thể về mã nếu bạn muốn; như tôi đã nói, chúng sẽ không phức tạp lắm.