Question

我试图访问控制器中的表单对象。表格位于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未定义 - 点击＆＃34;检查表格是否存在＆＃34;我得到＆＃34; Form未定义＆＃34;信息。即使我给它一个静态名称（<form name="form0">），我仍然会不确定。当我从ng-repeat循环中取出表格时，它可以正常工作。

知道为什么没有设置？

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

提前致谢！

Answer 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>

AngularJS - 在控制器中的ng-repeat undefined内形成

1 个答案: