Angular：列出或显示 $scope 中的现有表单答案

【问题标题】：Angular: List or show existing forms in $scopeAngular：列出或显示 $scope 中的现有表单
【发布时间】：2016-03-04 06:50:46
【问题描述】：

如果一个表单当前存在于 $scope 在给定时间，我如何检测？（可能有链接："show current forms in the current controller's $scope"）

如何列出 $scope 中的现有表单？（没有 VanillaJS）

伪代码：

console log ( existing forms in $scope ) -> list of existing forms

编辑：请考虑 $scope，谢谢！

【问题讨论】：

标签： angularjs forms angularjs-scope

【解决方案1】：

在访问表单对象之前，您需要等待 Angular 创建它们，使用 $watch 在控制器中访问它们。

var myApp = angular.module('myApp',[])
.controller("MainCtrl",['$scope',function($scope){
    $scope.$watch("forms",function(oldV,forms){
    	console.log("Number of form:"+ Object.keys(forms).length);
    	angular.forEach(forms,function(form,index){
        	console.log(form.$name);
        });
    });

    $scope.showCurrentForms = function(){
         console.log($scope.forms);
    };
}]);

<script src="https://code.angularjs.org/1.4.7/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MainCtrl">
    <form name="forms.myForm1" >
        <input name="input1"/>
    </form>
    <form name="forms.myForm2" >
        <input name="input2"/>
    </form>
     <form name="forms.myForm3" >
        <input name="input3"/>
    </form>
    <form name="forms.myForm4" >
        <input name="input4"/>
    </form>

    <button ng-click="showCurrentForms()">Current Forms</button>
</div>

【讨论】：

【解决方案2】：

没有扫描子作用域的通用方法，这就是作用域的意义所在。

对于简单的情况，您可以：

<form name="myForm" ng-init="register(myForm)">

“注册”是您的顶级控制器的方法。

如果你想要更聪明的东西——写指令

<form name="myForm" register-directive="register(myForm)" unregister="unregister(myForm)"

指令应该在创建时简单地运行register，在作用域上运行unregister。$destroy。

【讨论】：

【解决方案3】：

表单是 html 元素，因此您可以通过简单的 javascript 查询选择它们，然后将它们转换为 angular 元素（最后是 jQuery 或 jqLite 元素）：

<form name="formNumber1"></form>
<form name="formNumber2"></form>

那么你可以这样做：

var myForm1 = angular.element('formNumber1');
var allFormsOnThePage = angular.element(document.getElementsByTagName('form'));

考虑到 allFormsOnThePage 将是一个可以迭代的数组。

阅读此处以供参考：https://docs.angularjs.org/api/ng/function/angular.element

此外，Angular 在 $scope 中创建了一个与您的表单同名的变量，用于验证和错误跟踪，因此您可以检查是否存在具体表单，只需检查它是否未定义：

if ($scope.formNumber2) doWhatYouWant();

【讨论】：

【解决方案4】：

如果这是你的表单标签：

<form name="myForm" >

然后您可以像这样（从控制器）访问您的表单：

$scope.myForm

【讨论】：