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

Question

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

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

我想在选项卡之外有一个按钮，它将根据innerForm的有效性启用\禁用！

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

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

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

score 5 · Accepted Answer

tabset指令正在生成一个本地范围，它不属于您的外部表单范围。

在确实有效的示例中，您的内部和外部表单属性在同一范围内。为了证明这一点，我去掉了此处显示的外部选项卡集和选项卡标记指令，它可以工作。当您使用 tabset 指令包围标记时，会生成一个新的隔离范围，其中 innerForm 是其中的一部分。
.

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

如果您使用的是 Chrome，请获取Batarang 扩展程序，它将显示您的范围层次结构

1 回答 1