twitter-bootstrap - AngularJS和UI - 在选项卡内时无法访问外部表单

Question

我正在使用 AngularJS 1.0.5 版和 Angular UI (Bootstrap) 0.4.0。
我正在尝试集成 2 个功能:UI 的选项卡和 Angular 的表单。

我有嵌套表格。
一种形式 (outerForm) 包装了整个标签集。
另一种形式 (innerForm) 位于一个选项卡中。

我想在选项卡之外有一个按钮，它将根据 的有效性启用\禁用内部表格 !

当我尝试从表单本身外部访问 innerForm.$valid 时，它不起作用。

这是一个笨蛋:
http://plnkr.co/edit/sEz8TG?p=preview

现在，当我尝试使用常规 Bootstrap 进行相同操作时，它似乎确实有效:
http://plnkr.co/edit/Somic4?p=preview

当内部表单位于常规 div 中时，我可以从外部访问它。
当我使用 Angular UI 的特殊“制表符”语法时，它不再起作用了。

Answer 1

标签集 指令正在生成一个不属于您的外部表单范围的本地范围。

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

在确实有效的示例中，您的内部和外部表单属性在同一范围内。为了证明这一点，我去掉了外部的 tabset 和 tab 标签指令 show here它有效。当您使用 tabset 指令包围标记时，会生成一个新的隔离范围，其中 innerForm 是其中的一部分。
.

要解决此问题，您可以对表单中的更改执行 $watch，然后使用 $emit() (http://docs.angularjs.org/api/ng .$rootScope.Scope) 与内部范围更改值和有效性的外部范围进行通信。

如果您使用的是 Chrome，请获取 Batarang extension这将向您显示您的范围层次结构