-
Notifications
You must be signed in to change notification settings - Fork 58
Isolated Scope
Since version 1.3.27+
When you have an isolated scope or when you simply do not know which scope holds your complete Form object. This is especially true when you create a dynamic Form or when you create a Form inside a Modal Window.
The problem is more obvious when you want to run the checkFormValidity()
or get the $validationSummary
.
The way to go around this is to alternatively pass your own isolated scope to the Angular-Validation through the global options as shown below. Then after that, you could even use $compileProvider.debugInfoEnabled(false);
without any problems.
Change the Angular-Validation default options inside your controller with the isolated, for example a Modal Window Controller
myApp.controller('ModalCtrl', function ($modalInstance, $scope) {
// Modal Window uses it's own isolate scope, so pass it to Angular-Validation
// this will make the $validationSummary and checkFormValidity() to work properly
$scope.$validationOptions = { isolatedScope: $scope };
// now calling the checkFormValidity() is possible
$scope.save = function() {
if(new ValidationService().checkFormValidity($scope.form1)) {
// proceed with submit
}
}
});
From the Service you can also change it the following way.
P.S. This only works when all your elements have been defined by the Angular-Validation Service
// inject the ValidationService inside your Controller
myApp.controller('ModalCtrl', function ($modalInstance, $scope, ValidationService) {
// start by creating the service
var myValidation = new ValidationService();
// define the scope and isolatedScope, the scope property always needs to be there
myValidation.setGlobalOptions({ scope: $scope, isolatedScope: $scope });
// for the Service you could also directly use the scope property
// so this would also work and is equivalent
myValidation.setGlobalOptions({ scope: $scope });
// now calling the checkFormValidity() is possible
$scope.save = function() {
if(new ValidationService().checkFormValidity($scope.form1)) {
// proceed with submit
}
}
});
This is kind of a hack, in most cases, passing the isolated scope might actually not equal to the real scope where your Form is declared, and in that case the hack will work perfectly for the Angular-Validation, but then showing the $scope.form1
in the console will present you with an object that is probably much shorter than you expected, it will of course have the $validationSummary
and the form $name
and lastly a specialNote
saying that this was created by the Angular-Validation. Something like the following:
$scope.form1: {
$name: "form1",
$validationSummary: [],
specialNote: "Created by Angular-Validation...."
}
All that to say, the hack of creating an isolatedScope
is working great, so go ahead use it, but please take in consideration that it was added specifically for $validationSummary
and checkFormValidity()
and of course the Angular-Validation
library itself... but please do not post any issue telling me that the form object does not hold this or that, I know about it and it's normal behavior.
Contents
- Angular-Validation Wiki
- Installation
- Demo
- Code Samples
- Functionalities
- Custom Validations
- Properties & Options
- Validators
- Tests
- Misc