如何在AngularJS中的父控制器或作用域中访问FormController

Question

我有一个包含多种表单的页面,我只想一次显示一个.为此,我将每个表单分成一个部分并使用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顺便说一句.

另外,使用AngularJS Batarang Chrome插件进行检查,我可以看到表单作为子范围发布到当前范围.

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

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

这是因为我正在使用ng-include？那么在控制器中无法访问这些表单吗？

Answer 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;
});

Answer 2

通过使用在其范围层次结构中查找对象的角度过程,可以更简单地在范围层次结构中进行备份通信.

这允许我们使用点表示法将对象从较低的范围附加到较高的范围.

在这种情况下,您需要在顶级控制器上创建一个"捕手"空对象.然后可以为较低范围分配此捕获器对象的表单对象.这是一个演示的插件.

http://plnkr.co/edit/xwsu48bjM3LofAoaRDsN?p=preview

它并不完美,但如果你把这个"捕手"对象想象成一个事件听众,我们仍然遵循一个标准模式.

在控制器中创建一个空的捕手对象,您希望对嵌套表单进行引用

function mainController($scope){
  $scope.catcher = {

  };
 }

然后在声明ng-form指令时在标记本身中,像这样设置catcher.formName = formName

<ng-form name="alpha">
          <span ng-init="catcher.alpha = alpha"></span>
          <input type="text" required="" ng-model="alphaValue" />
        </ng-form>

因为我们被分配到"catcher.",angular将遍历范围层次结构并在mainController中找到它,而不管它们之间是否有任何数量的控制器(当然,假设它们也没有捕获器对象)

Answer 3

因为我使用部分视图,ng-view表单已在我的控制器的子范围上注册.由于原型继承,我似乎无法从父级访问子范围.

也就是说,我确实设法通过传递负责打开/关闭手风琴的函数将表单控制器实例放入我的控制器中.

解决方案是这样的:

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

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

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

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