AngularJS & UI - Không thể truy cập biểu mẫu bên ngoài khi bên trong tab

Question

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.

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.

Answer 1

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