如何访问的FormController在AngularJS父控制器或范围 [英] How do I access FormController in parent controller or scope in AngularJS

问题描述

我有多种形式的网页，我只想展示一次。为此，我分隔每个组建成一个部分，并用引导的手风琴插件，我只允许一次一个开放的部分。

I have a page with multiple forms and I only want to show one at a time. For this I separated each form into a section and using Bootstrap's accordion plugin I only allow one open section at a time.

我的标记看起来是这样的：

My markup looks something like this:

<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>

一切都工作得很好，我可以等形式之间切换。

Everything work just fine, I can navigate between the forms etc.

由于我不希望用户打开一个部分，如果他们正在编辑一个包含验证错误，我试图在 open_section 功能检查，如果关联的形式它是有效的或没有。

Because I don't want the user opening a section if the one they are currently editing contains validation errors, I tried checking in the open_section function if the form associated with it is valid or not.

我试过，但我不能。我不能访问与控制器，它负责该网页的形式有关的的FormController。出于某种原因，他们没有得到发表的范围。

I tried, but I could not. I could not access the FormController associated with the forms in the controller that is responsible for the page. For some reason, they are not getting published on the scope.

这是我的尝试：

• $ scope.section1Form 是未定义

与 $范围。$手表试过（'section1Form，函数（）{}），仍然不确定

尝试添加的形式，像这样一个第二个参数 open_section 的名称： open_section（'SECTION1'，section1Form）但在功能的第二个参数是未定义。

tried adding the name of the form as a second parameter to open_section like so: open_section('section1', section1Form) but in the function the second argument is undefined.

关系的＆LT;形式为GT;＆LT; /形式为GT; 标签，我可以访问的FormController，但他们以外我不知道。由于该事件是从外面来的＆LT;形式＆GT; （当天收盘时，部分开口）我不能的FormController传递给我的控制器来检查的有效性，我形式。

Between the <form></form> tags, I have access to the FormController, but outside them I don't. Since the event is coming from outside the <form> (the closing, opening of the sections) I can't pass the FormController to my controller to check the validity of my forms.

有没有办法来解决这个问题，或者我应该重构我的网页？

Is there a way to get around this, or should I refactor my page?

我使用的角度1.1.5 BTW。

I am using Angular 1.1.5 btw.

此外，在AngularJS Batarang Chrome的插件检查，我可以看到的形式得到发表的子作用域到目前的范围。

Also, checking with the AngularJS Batarang Chrome plugin, I can see that the forms get published as child scopes to the current scope.

修改：这是范围层次的外观为这个应用程序

EDIT: this is how the scope hierarchy looks for this app

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

这是因为我使用 NG-包括？难道就没有办法访问控制器那些形式呢？

Is this because I'm using ng-include? Is there no way to access those forms in a controller then?

推荐答案

要处理动态的形式，和与此相关的FormController的动态位置，我用一个简单的指令，来帮助查找包含表单的范围。

To deal with dynamic forms, and thus the dynamic location of the associated FormController, I used a simple directive to help locate the scope that contains the form.

解决方案：

创建$发出的/表单关联W¯¯范围的指令：

Create a directive that $emit's the scope associated w/the form:

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

使用该指令在标记：

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

听由指令在控制器广播的事件：

Listen for the event broadcast by the directive in your controller:

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

这篇关于如何访问的FormController在AngularJS父控制器或范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！