7

Tôi đang sử dụng AngularJS phiên bản 1.0.5 và Giao diện người dùng góc (Bootstrap) 0.4.0. Tôi đang cố gắng tích hợp 2 tính năng: các tab của giao diện người dùng và các dạng Góc.AngularJS & UI - Không thể truy cập biểu mẫu bên ngoài khi bên trong tab

Tôi có các biểu mẫu lồng nhau. Một biểu mẫu (outerForm) bao trùm toàn bộ tabset. Hình thức khác (innerForm) nằm trong một tab.

Tôi muốn có nút, bên ngoài các tab, sẽ được bật \ bị vô hiệu hóa theo tính hợp lệ của innerForm!

Khi tôi cố gắng truy cập innerForm. $ Hợp lệ từ bên ngoài biểu mẫu, nó không hoạt động.

Đây là một plunker: http://plnkr.co/edit/sEz8TG?p=preview

Bây giờ, khi tôi cố gắng cùng với Bootstrap thường xuyên, nó có vẻ làm việc: http://plnkr.co/edit/Somic4?p=preview

Khi hình thức bên trong nơi cư trú của một div bình thường, tôi có thể truy cập từ bên ngoài. Khi tôi sử dụng cú pháp 'tab' đặc biệt của Giao diện người dùng góc, nó không hoạt động nữa.

Trả lời

5

Bộ mã hóa đang tạo một phạm vi cục bộ không nằm trong phạm vi biểu mẫu ngoài của bạn.

https://github.com/angular-ui/bootstrap/blob/master/src/tabs/tabs.js#L78

Trong ví dụ mà không làm việc, tính chất hình thức bên trong và bên ngoài của bạn nằm trong phạm vi tương tự. Để chứng minh điều này, tôi đã loại bỏ các thẻ tab ngoài và thẻ tab chỉ thị show here và nó hoạt động. Khi bạn bao quanh đánh dấu với các chỉ thị tabset, một phạm vi phân lập mới được tạo ra trong đó innerForm là một phần của.
.

Để khắc phục điều này, bạn có thể thực hiện $ watch cho các thay đổi trong biểu mẫu, sau đó là $ emit() (http://docs.angularjs.org/api/ng. $ RootScope.Scope) để liên lạc với phạm vi bên ngoài phạm vi thay đổi trong giá trị và hiệu lực.

Nếu bạn đang sử dụng Chrome, có Batarang extension mà sẽ cho bạn thấy phạm vi của bạn phân cấp

+0

Ngoài ra, hãy chắc chắn rằng bạn nâng cấp lên mới nhất của góc Bootstrap. https://github.com/angular-ui/bootstrap/issues/574 Tab biên dịch đã được cố định mà đã gây ra một số vấn đề chúng tôi đã có với hành vi kỳ lạ trên các hình thức các yếu tố được bên trong tab. –

+0

Một tùy chọn khác sẽ là chuyển vùng chứa của đối tượng "biểu mẫu", như được hiển thị ở đây http://stackoverflow.com/questions/19568761/can-i-access-a-form-in-the-controller. Nếu bạn chỉ tìm kiếm một cách đơn giản để truy cập biểu mẫu từ bộ điều khiển cơ sở, mặc dù tabset - đó là tùy chọn đơn giản nhất có sẵn. –