AngularJS - 控制器中未定义的 ng-repeat 中的表单答案

【问题标题】：AngularJS - form inside ng-repeat undefined in controllerAngularJS - 控制器中未定义的 ng-repeat 中的表单
【发布时间】：2016-08-12 00:25:37
【问题描述】：

我正在尝试访问我的控制器中的表单对象。表单位于 ng-repeat 块中，它具有动态名称，从 v1.3 开始我应该可以访问它。

js:

var app = angular.module('app', []);
app.controller('AppCtrl', ['$scope', function($scope) {
  $scope.forms = [0];
  $scope.testForm = function() {
    if($scope.form0 == undefined) {
      $scope.test = 'Form is NOT defined';
    } else {
      $scope.test = 'Form is defined';
    }
  }
}])

html:

<body ng-app="app">
  <div ng-controller="AppCtrl">
    <div ng-repeat="form in forms" ng-init="formName = 'form' + $index">
      form name should be {{formName}}
      <form name="{{formName}}">
        <input type="text" name="field" />
      </form>
    </div>
  <button ng-click="testForm()">Check if form exists</button>
  <p ng-bind="test"></p>
  </div>
</body>

但在我的控制器中 $scope.form0 是未定义的 - 单击“检查表单是否存在”后，我收到“表单未定义”消息。即使我给它一个静态名称（<form name="form0">），我仍然会一直不确定。当我从 ng-repeat 循环中取出表单时，它工作正常。

知道为什么没有设置吗？

上面的例子： https://plnkr.co/edit/Fvy5LdIO0H1vCS9wYR0U?p=preview

提前致谢！

【问题讨论】：

标签： javascript angularjs forms angularjs-ng-repeat

【解决方案1】：

这是因为ng-repeat 正在创建独立的子作用域，form0 在子作用域中，从父作用域（控制器作用域）看不到。

因此解决方案是将其传递给父级。但是我们不能在 ng-init 中这样做，因为那时表单控制器还没有初始化。

我能想到的一种方法是使用自定义指令将 formController 绑定到指定范围。

app.directive("form",function($parse){
  return{
    restrict:"E",
    priority:-1,
    link:function(scope,ele,attrs){
      var targetScope = $parse(attrs.bindToScope)(scope);
      if(targetScope){
        targetScope[attrs.name] = scope[attrs.name];
      }
    }
  }
})

通过这个我们可以告诉表单将控制器绑定到我们指定的范围。

<form name="{{formName}}" bind-to-scope='$parent' >
     <input type="text" name="field" />
</form>

【讨论】：