2013-02-24 36 views
6

Tôi cần tạo hộp thoại để sử dụng với bất kỳ mục nào trong danh sách các mục. Các hộp thoại là khá nhiều giống nhau bất kể mặt hàng ngoại trừ các giá trị của các lĩnh vực mà rõ ràng là phụ thuộc vào mục.góc cạnh - hộp thoại có thể sử dụng lại

Chỉ thị tôi đang xây dựng đang đọc mẫu từ một tệp, biên dịch nó với $ biên dịch và sau đó liên kết (liên kết) nó với phạm vi của mục. Kết quả của sự ràng buộc là một cây DOM. Để hiển thị hộp thoại, tôi cần thêm cây này vào một số phần tử trong DOM hiện có. Bản chất của hộp thoại của tôi là như vậy mà nó có ý nghĩa để nối trực tiếp vào thẻ body. Hộp thoại sẽ được sử dụng nhiều lần kết hợp với các mục khác nhau trong danh sách

Vì vậy, đây là câu hỏi của tôi: Bạn có thể thực hiện bao nhiêu quá trình này (biên dịch, ràng buộc, nối thêm)? Tôi chắc chắn có thể chạy biên dịch một lần. Tôi cũng có thể liên kết kết quả biên dịch với $ rootscope và chắp thêm (ẩn) nó vào thẻ body. Bằng cách này tôi có thể sau đó chỉ cần bật khả năng hiển thị và hiển thị hộp thoại.

Nhưng nếu nó đã bị ràng buộc và gắn với DOM, nó có kosher để ràng buộc lại nó với một số phạm vi khác, nếu vậy - cách thích hợp để làm điều đó là gì? Một câu hỏi khác là nó thậm chí còn đáng giá? có thể chỉ cần chèn lại nó mỗi khi cần thiết?

Trả lời

2

Câu hỏi hay mà tôi nghĩ. Bạn đang tự hỏi nếu một người có thể "trao đổi nóng" phạm vi của một yếu tố. Tôi không biết nếu có một cách để làm điều đó, hoặc thậm chí nếu có, nếu đó là cách góc. Tôi lấy nó, bạn nhìn vào cách ng-view hoạt động để đạt được như xa như bạn đã nhận được?

Lời khuyên của tôi là thực hiện biên dịch $ một lần, giữ kết quả, liên kết hoặc chức năng chuyển đổi hoặc bất kỳ thứ gì được gọi trong giao diện Góc, xung quanh một nơi nào đó. Và gọi nó cho từng trường hợp cần thiết của hộp thoại.

4

Nếu bạn chỉ bao giờ hiển thị một hộp thoại như vậy tại một thời điểm và bạn sẽ sử dụng nó thường xuyên, bạn không phải liên kết lại với phạm vi khác, chỉ cần thay đổi dữ liệu trên phạm vi. Một cái gì đó như thế này:

  1. Tạo một dịch vụ cho thoại của bạn
  2. Tạo các chỉ thị và tiêm dịch vụ của bạn vào đó. Khi hàm liên kết thực thi, chuyển một cái gì đó như $ scope.dialogData đến dịch vụ để dịch vụ có thể cập nhật dữ liệu.
  3. Tạo bộ điều khiển nhận dịch vụ được tiêm. Đặt dữ liệu thoại thông qua dịch vụ để hiển thị hộp thoại. Vì bạn đang sửa đổi dữ liệu trong bộ điều khiển nằm trong phạm vi chỉ thị, Angular sẽ thông báo và cập nhật hộp thoại của bạn.
  4. Thêm ng-show trên trình bao bọc hộp thoại của bạn để đơn giản hóa việc triển khai các phương thức open()/close() trên dịch vụ của bạn.

Bây giờ bạn có một hộp thoại có thể được sử dụng từ bất kỳ nơi nào trong hệ thống của mình. Bạn chỉ cần sử dụng lại cùng một chỉ thị mà không phải gây rối với DOM hoặc biên dịch.

5

Đây thực sự là câu hỏi tuyệt vời và tôi rất vui khi thấy ngày càng có nhiều người bắt đầu tiếp cận các hộp thoại như dịch vụ.

Về câu hỏi cụ thể của bạn, đây là một số suy nghĩ của tôi:

  • Bạn có thể "bộ nhớ cache" chức năng liên kết (có nghĩa là - chức năng mà được trả về từ các $compile cuộc gọi) và sau đó gọi chức năng này khi cần thiết (chuyển các biến phạm vi).
  • Thay vì chèn phần tử được biên dịch (ẩn), bạn chỉ có thể đính kèm theo yêu cầu khi mở hộp thoại. Trên đầu trang của điều này tôi thà đính kèm yếu tố phương thức để $rootElement thay vì <body> chỉ cần không chạm vào các yếu tố DOM ở trên, nơi ng-app được xác định. Chỉ cần không chạm vào các phần của DOM mà AngularJS không kiểm soát.
  • Các hộp thoại IMO thực sự gần với các tuyến AngularJS (vì chúng cung cấp các "chế độ xem khác nhau") và như vậy sẽ rất tốt khi có khả năng giải quyết lời hứa trước khi phương thức được hiển thị (như với các tuyến đường).

Thực tế có nhiều điều cần xem xét khi thiết kế dịch vụ thoại tốt, chung chung và tôi hy vọng rằng những lời khuyên đó, cùng với đầu vào tuyệt vời được cung cấp bởi người khác sẽ giúp bạn bắt đầu. Nhưng tất cả điều này là một chút lý thuyết vì vậy nếu bạn đang nhìn vào việc thực hiện những gì đã được thảo luận ở đây bạn có thể có một cái nhìn tại this implementation. (Dịch vụ thoại $ từ http://angular-ui.github.com/bootstrap/ - nó hoàn toàn có thể tùy chỉnh để có thể sử dụng với CSS không phải của Bootstrap. Tài liệu here).

Nó có thể được nhìn thấy trong hành động trong liệng này: http://plnkr.co/edit/PG0iHG?p=preview

+0

Không chắc về đạn điểm hai - các hộp thoại thường tìm ra vị trí của họ trong tài liệu tọa độ, và cách duy nhất để đảm bảo đúng vị trí sử dụng 'top' và ' left' px là đặt ngay trên cơ thể. Ý tôi là, giả sử bạn không muốn trừ ra vị trí của offsetParent. – jpsimons

+0

@ pkozlowski.opensource Tôi đã kiểm tra thư rác của bạn và tài liệu cho hộp thoại $ (bây giờ là $ modal tôi nghĩ). Bạn có thể giải thích cho tôi tại sao chúng ta không thể thiết lập phạm vi từ bộ lặp trong các tùy chọn hộp thoại. Tại sao điều đó không hoạt động? – uriDium

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