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

Isolated Scope

Ghislain B. edited this page Jun 3, 2015 · 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

myApp.controller('ModalCtrl', function ($modalInstance, $scope) {

  // 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 be the real scope where your Form is declared, and in that case this hack will work but then showing the $scope.form1 in the console will present you with an object that does not hold much, it has the $validationSummary and the $name and a specialNote saying that this was created by the Angular-Validation. Something like:

$scope.form1: { $name: "form1", $validationSummary: [], specialNote: "Created by Angular-Validation...." }

All that to say, the hack makes this possible without any problems, go ahead use it, but please take in consideration that it was added specifically for $validationSummary and checkFormValidity() and of course the Angular-Validation itself... but please do not post any issues saying that the form object does not hold this or that, I know about it and it's normal behavior.

Clone this wiki locally