Angular Bootstrap Modal Masks Forms

I am trying to get at an angular form in scope to verify validations etc. Base Case Let us say I have the following HTML:

Solution 1:

Update: angular ui-bootstrap 0.12.0 fixes the problem - transclusion scope becomes the same as controller's scope, no need for $parent.. Just upgrade.

Before 0.12.0:

Angular-UI modals are using transclusion to attach modal content, which means any new scope entries made within modal are created in child scope. This happens with form directive.

This is known issue: https://github.com/angular-ui/bootstrap/issues/969

I proposed the quick workaround which works for me, with Angular 1.2.16:

<form name="$parent.userForm">

The userForm is created and available in modal's controller $scope. Thanks to scope inheritance userForm access stays untouched in the markup.

<div ng-class="{'has-error': userForm.email.$invalid}"}>

Share