$ modal的范围问题

时间:2014-01-09 21:00:41

标签: angularjs twitter-bootstrap

在我的应用程序中,我使用工厂在模态对话框中打开不同的表单。在模态对话框的控制器中,我在继续操作逻辑之前检查表单是否有效。

这是使用ui-bootstrap $对话框(版本0.5.0)的工作文件,但当升级到使用$ modal(0.9.0)时,这不再有效,我得到$ scope.myForm。$ valid = undefined

我尝试过使用$ rootScope并从调用控制器传递$ scope但是都没有工作。

这是我创建的用于复制问题的plunker :(弹出对话框并点击“保存”按钮)

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

有人可以提出解决此问题的最佳方法吗?

谢谢, Ñ

2 个答案:

答案 0 :(得分:1)

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

更改

$scope.form.myForm = {};

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

它有效。那是你想要的吗?

答案 1 :(得分:0)

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

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

那么表格在哪里?

表单存在于自己的范围内,嵌套在您期望它居住的范围内。迷惑了吗?

enter image description here

那么如何访问我的表单?

从孩子(持有你的表格的范围)到父母的沟通很容易,但不是相反(至少据我所知)。因此,您可以在ModalInstanceCtrl中定义一个方法来存储对表单的引用,如下所示:

var myForm = null;

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

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

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

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