Scope issues with $modal

2
votes

In my application I am using a factory to open different forms in a modal dialog. in the modal-dialog's controller I check if the form is $valid before proceeding with my action's logic.

this was working file with ui-bootstrap $dialog (version 0.5.0) but when upgraded to using the $modal (0.9.0) this no longer works and i'm getting $scope.myForm.$valid = undefined.

I've tried using the $rootScope and passing the $scope from the calling controller but neither work.

Here is a plunker I've created to replicate the issue: (pop open the dialog and hit the Save button)

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

can anyone suggest the best way to resolve this?

Thanks, N

2
angularjstwitter-bootstrap
@its not good idea to pass $scope to service as argument. You brake Angular rules I think. Services are Singleton. - Maxim Shoustin
@MaximShoustin has a point. I'd use resolve to share any variables that need sharing. - Jesus is Lord
See gertas answer in this post, very simple and efficient: stackoverflow.com/questions/19312936/… - mvera

2 Answers

1
votes

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

Change

$scope.form.myForm = {};

To

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

And it works. Is that what you wanted?

0
votes

The problem in your code boils down to that myForm simply doesn't exist in the scope you expect it to.

You only get the undefined result because you earlier define myForm to be an empty object with $scope.myForm = {};. When you remove that line, your error will be Cannot read property '$valid' of undefined, as myForm in your scope has no relation at all to the form in the modal.

So where is the form?

The form exists in it's own scope, nested within the scope you expected it to live in. Confused yet?

enter image description here

So how do I access my form?

It is easy to communicate from a child (the scope that holds your form) to a parent, but not the other way around (at least to my knowledge). So you could simply define a method in ModalInstanceCtrl to store a reference to your form like so:

var myForm = null;

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

Then invoke that method from within your template myForm.html with {{storeForm(myForm)}}.

You can then access myForm.$valid in your scope.save() method to check if it is valid.

Alternatively, you could pass parameters through the save() invocation itself, like so: save(myForm).