javascript - 为什么我无法访问 angularJS 上 ngInclude 内的表单对象？

Question

我有一个由多个 ng-include 堆栈构建的屏幕。最后一个，特别是，我根据用户配置构建屏幕。

有时，我必须在其中包含的模板之一中显示表单。当我的用户单击“保存”按钮时，我必须验证表单中的所有字段是否有效。

与此同时，当尝试访问表单对象以检查 $valid 时，我的表单未定义。

经过一天的斗争，我发现 ng-include 进程不接受要创建的表单对象。

我创建了这个插件来看看它是否真的发生在一个简单的项目上，制作了一个工作表单而不是一个工作表单: http://plnkr.co/edit/4oMZYLgaYHJPoSZdSctI?p=preview

基本上，创建了一个表单，如下所示，具有所需的 Angular 属性:

<form name="sampleForm">
    <input type="text" name="aws" required ng-model="myValue">
    <br/>myValue: "{{ myValue }}"
    <br/>

    <input type="text" name="aws" required ng-model="myValue">
    <br/>myValue: "{{ myValue }}"
</form>

并尝试像这样访问表单对象:

$scope.sampleForm.aws.$valid

结果是:

$scope.sampleForm === undefined

有人知道如何解决这个问题吗？

Answer 1

由于 ng-include 创建了新范围，因此 $scope.sampleForm 在包含的页面中将是未定义的。

解决方案应该是在包含的 HTML 页面本身中获取 ng-controller="formController" 声明，我认为这也是一个更好的设计，因为我看不到这样的场景:它不是“控制”表单。

另一种未包含的形式显然可以按照您的预期工作。

Plunker