如何在AngularJS的父控制器或范围中访问FormController

小编典典

如何在AngularJS的父控制器或范围中访问FormController

angularjs

我的页面有多种形式，一次只想显示一个即可。为此，我将每种形式分成一个部分，并使用Bootstrap的手风琴插件一次只允许一个打开的部分。

我的标记看起来像这样：

<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函数是否与其关联的表单有效。

我尝试过，但是我做不到。我无法访问负责页面的控制器中与表单关联的FormController。由于某些原因，它们没有在示波器上发布。

这是我尝试的：

$scope.section1Form 是 undefined
尝试过$scope.$watch('section1Form, function(){})，仍未定义
尝试将表单名称添加为第二个参数，open_section例如：open_section('section1', section1Form)但是在函数中，第二个参数为undefined。

在<form></form>标签之间，我可以访问FormController，但是在标签之外，我没有访问权限。由于该事件来自<form>（各部分的关闭，打开）外部，因此我无法将FormController传递给控制器来检查表单的有效性。

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

我正在使用Angular 1.1.5 btw。

另外，通过使用AngularJS Batarang Chrome插件检查，我可以看到表单已作为子作用域发布到当前作用域。

编辑：这是范围层次结构查找此应用程序的方式

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

这是因为我正在使用ng-include吗？那么，没有办法在控制器中访问那些表格吗？

阅读 210

2020-07-04

共1个答案

小编典典

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

解：

创建一个指令，$ emit是与该窗体关联的范围：

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

在标记中使用指令：

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

监听控制器中的指令广播的事件：

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

2020-07-04