Scope get lost when use block-ui attribute

[gufigueiredo]

If I have

<div block-ui="blockDiv">
          <form name="editForm">
                   <input type="text" name="customerName" ng-model="vm.Customer.Name />
         </form>
</div>

... I cannot access my form via scope:

function next(){
     var formValid = $scope.editForm.$valid            //this return Undefined for 'editForm'
}

If I remove the block-ui everything works fine.

Any workarounds?

[knvpk]

same problem when using block-ui attribute.

[knvpk]

Hi @gufigueiredo , hav you found the answer for this problem.

[knvpk]

Is there anybody?

[McNull]

Hi,

The scope (or scope editForm variable) isn't lost, it was never on the same scope as the controller scope.Just like ng-model expressions, the name attribute should always contain a dot. JavaScript does not have the ability to create pointers and or references, so you should always wrap them in container objects.

For example:

function MyController($scope) {
  // Use the controller (view model) as wrapper
  this.editForm= { 
    $state: {} // Not really needed here -- but makes it abit more clear. 
                   // I personally always name this something like state (because it is actually the state of the form) and in most cases I have another property here for the (input) model.
  };

  function next() {
    var formValid = this.editForm.$state.$valid;
  }
}

<!-- View Markup -->
<!-- Note the name expression -->
<div block-ui="blockDiv">
          <form name="vm.editForm.state">
                   <input type="text" name="customerName" ng-model="vm.Customer.Name />
         </form>
</div>

Hope this makes it all clear.