javascript - 如何在 AngularJS 的父 Controller 或作用域中访问 FormController

Question

我有一个包含多个表单的页面，我只想一次显示一个。为此，我将每个表单分成一个部分，并使用 Bootstrap 的 Accordion 插件一次只允许打开一个部分。

我的标记看起来像这样:

<a ng-click="open_section('section1')">Section 1</a>

<div collapse="section1">
  <form name="section1Form">
  </form>
</div>

<a ng-click="open_section('section2')">Section 2</a>

<div collapse="section2">
  <form name="section2Form">
  </form>
</div>

一切正常，我可以在表单之间导航等。

因为我不希望用户在当前正在编辑的部分包含验证错误的情况下打开该部分，所以我尝试检查 open_section如果与其关联的表单有效或无效，则函数。

我试过了，但我做不到。我无法访问与负责页面的 Controller 中的表单关联的 FormController。由于某种原因，它们没有在范围内发布。

这是我尝试过的:

• $scope.section1Form是undefined

• 尝试使用 $scope.$watch('section1Form, function(){}) , 仍未定义

• 尝试将表单名称作为第二个参数添加到 open_section像这样:open_section('section1', section1Form)但在函数中第二个参数是 undefined .

在 <form></form> 之间标签，我可以访问 FormController，但在它们之外我不能。由于事件来自 <form> 之外(部分的关闭、打开)我无法将 FormController 传递给我的 Controller 来检查我的表单的有效性。

有没有办法解决这个问题，还是我应该重构我的页面？

顺便说一句，我正在使用 Angular 1.1.5。

此外，通过检查 AngularJS Batarang Chrome 插件，我可以看到表单作为子范围发布到当前范围。

编辑:这是此应用的作用域层次结构

 - root
 |
 ---current controller\'s scope
 |
 ----scope that contains the forms

这是因为我正在使用 ng-include ？那么就没有办法在 Controller 中访问这些表单吗？

Answer 1

为了处理动态表单，以及关联 FormController 的动态位置，我使用了一个简单的指令来帮助定位包含表单的范围。

解决方案:

创建一个指令，$emit 是与表单关联的范围:

  module.directive('formLocator', function() {
    return {
      link: function(scope) {
        scope.$emit('formLocator');
      }
    }

在标记中使用指令:

<form name="myForm" novalidate form-locator>

监听 Controller 中指令广播的事件:

$scope.$on('formLocator', function(event) {
  $scope.myDeeplyNestedForm = event.targetScope.myForm;
});