AngularJS - form inside ng-repeat在控制器中未定义

AngularJS - form inside ng-repeat undefined in controller

本文关键字：控制器 未定义 ng-repeat form inside AngularJS      更新时间：2023-09-26

我试图访问窗体对象在我的控制器。表单位于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循环中取出form时，它工作得很好。

知道为什么没有设置吗?

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

提前感谢!

这是因为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>
相关文章：