Skip to content
This repository has been archived by the owner on Jul 1, 2020. It is now read-only.

Isolated Scope

Ghislain B edited this page Mar 23, 2017 · 24 revisions

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.

Directive

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
    }
  }
});

Service

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
    }
  }
});
Special Note

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.

Clone this wiki locally