AngularJS控制器中$scope.myForm为undefined问题求助

这个问题我之前也踩过坑！核心原因就是ng-switch指令会创建独立的子作用域，你在父控制器的$scope里直接找myForm肯定找不到——因为表单被隔离在子作用域里了。下面给你几个实用的解决方案：

方案1：用对象包裹表单引用（推荐） #

AngularJS的作用域是原型继承的，如果父作用域里定义一个对象，子作用域会继承这个对象的引用，表单就能顺利挂载到父作用域的对象上。

修改你的HTML：

<div ng-switch="bla">
  <div ng-switch-when="blabla">
    <form name="formRefs.myForm">
      <!-- 表单内容 -->
    </form>
  </div>
</div>

然后在控制器里先初始化这个容器对象：

$scope.formRefs = {};
// 之后就能通过$scope.formRefs.myForm访问表单了

这种方式不管ng-switch嵌套多少层，表单都会稳稳绑定在父作用域的对象里，不会出现undefined的情况，是最稳妥的做法。

方案2：用$parent直接绑定到父作用域 #

如果不想额外创建对象，也可以在表单的name属性里用$parent指定直接挂载到父作用域：

<div ng-switch="bla">
  <div ng-switch-when="blabla">
    <form name="$parent.myForm">
      <!-- 表单内容 -->
    </form>
  </div>
</div>

这样你在JS里就能直接拿到$scope.myForm了。不过要注意，如果页面层级变深，$parent的使用会变得混乱，所以只适合简单场景。

额外提醒 #

别忘了确认ng-switch-when="blabla"的条件是满足的——也就是$scope.bla的值等于blabla，不然表单根本没渲染出来，那$scope里肯定拿不到哦！

内容的提问来源于stack exchange，提问作者Razvan N