如何访问父控制器中的 FormController 或 AngularJS 中的作用域 [英] How do I access FormController in parent controller or scope in AngularJS

问题描述

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

我的标记如下所示:

第 1 节<div collapse="section1"><表单名称="section1Form"></表单>

<a ng-click="open_section('section2')">第 2 节</a><div collapse="section2"><表单名称="section2Form"></表单>

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

因为我不希望用户打开他们当前正在编辑的部分包含验证错误的部分，所以我尝试检查与它相关联的表单是否有效的 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 插件检查，我可以看到表单作为子范围发布到当前范围.

编辑:这是此应用的范围层次结构

 - 根|---电流控制器的范围|----包含表单的范围

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

解决方案

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

>

解决方案:

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

 module.directive('formLocator', function() {返回 {链接:功能(范围){scope.$emit('formLocator');}}

在标记中使用指令:

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

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

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.

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.

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.

This is what I tried:

• $scope.section1Form is undefined

• tried with $scope.$watch('section1Form, function(){}), still undefined

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

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?

I am using Angular 1.1.5 btw.

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

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

解决方案

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.

Solution:

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

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

Use the directive in the markup:

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