$modal 的范围问题答案

【问题标题】：Scope issues with $modal$modal 的范围问题
【发布时间】：2014-01-28 15:22:13
【问题描述】：

在我的应用程序中，我使用工厂在模式对话框中打开不同的表单。在模态对话框的控制器中，我在继续执行我的操作逻辑之前检查表单是否为 $valid。

这是使用 ui-bootstrap $dialog（版本 0.5.0）的工作文件，但是当升级到使用 $modal（0.9.0）时，它不再有效，我得到 $scope.myForm.$valid = undefined .

我已经尝试使用 $rootScope 并从调用控制器传递 $scope 但都不起作用。

这是我为复制问题而创建的一个 plunker：（弹出打开对话框并点击“保存”按钮）

http://plnkr.co/edit/hLKob1LTzVs8GpOn5vmW?p=preview

谁能建议解决这个问题的最佳方法？

谢谢，否

【问题讨论】：

@将$scope 作为参数传递给服务并不是一个好主意。我认为你破坏了 Angular 规则。服务是单例的。
@MaximShoustin 有道理。我会使用resolve 来共享任何需要共享的变量。
在这篇文章中查看gertas的答案，非常简单高效：stackoverflow.com/questions/19312936/…

标签： angularjs twitter-bootstrap

【解决方案1】：

http://plnkr.co/edit/IvSKpn3OJMp5E0yEkdIu?p=preview

改变

$scope.form.myForm = {};

到

$scope.form = {};
$scope.form.myForm = {};

而且它有效。这是你想要的吗？

【讨论】：

或者干脆$scope.form = { myForm: {} };
出于好奇，除了潜在的可读性问题（它们对我来说都是可读的）之外，这两个初始化是否同样有效？
我怀疑是否存在明显的性能差异。我发的那个少打字？缩小更小？
你的答案是正确的，我的 plunker 不是 - 我想我过度简化了这个场景，但我的服务是从另一个指令的控制器中使用的，它有自己的子范围，那就是事情中断的时候。我需要修复 plunker 以反映这一点。
我认为 Shmiddty 的替代方案效率更高，因为属性查找更少，但我们在这里讨论的是微秒。

【解决方案2】：

您的代码中的问题归结为 myForm 根本不存在于您期望的范围内。

您只会得到undefined 结果，因为您之前将myForm 定义为带有$scope.myForm = {}; 的空对象。当您删除该行时，您的错误将是 Cannot read property '$valid' of undefined，因为您范围内的 myForm 与模式中的表单完全没有关系。

那么表格在哪里呢？

表单存在于它自己的范围内，嵌套在您希望它存在的范围内。感到困惑吗？

那么如何访问我的表单？

从子级（保存表单的范围）与父级进行通信很容易，但反过来则不然（至少据我所知）。因此，您可以简单地在 ModalInstanceCtrl 中定义一个方法来存储对您的表单的引用，如下所示：

var myForm = null;

$scope.storeForm = function(form) {
  myForm = form;
}

然后在您的模板myForm.html 中使用{{storeForm(myForm)}} 调用该方法。

然后您可以在您的scope.save() 方法中访问myForm.$valid 以检查它是否有效。

或者，您可以通过 save() 调用本身传递参数，如下所示：save(myForm)。

【讨论】：

或只是var myForm = $scope.$$childTail.myForm;