Angular js to disable directives based on condition

Question

I am having a form page which is used for both add and edit form . So at the time of adding data into form , i need to check input data is duplicated or not, so i created a directive which will check with the data base weather data is existed or not.

<input name="divId" type="text" class="form-control fL w250"   ng-model="divisionData.DivisionID"  ng-disabled="Disabled()" unique-divid required /></div>

at the time of adding new data its works fine . but at the time of edit also using the same form so the unique-divid directive is running. I don't want this to happen in edit page

.directive('uniqueDivid', function($http) {
  var toId;
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elem, attr, ctrl) { 
     scope.$watch(attr.ngModel, function(value) {
        if(toId) clearTimeout(toId);
        toId = setTimeout(function(){
          console.log(value);
            $http({
            method  : 'POST',
            url     : 'http://testurl',
            data    : $.param({'DivisionID' : value}), 
            headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  
        })
            .success(function(data) {
                console.log(data);
                if(data.status == 'success'){
                    ctrl.$setValidity('uniqueDivid', true);
                }else if(data.status == 'fail'){
                    ctrl.$setValidity('uniqueDivid', false);
                }
                if (!data.success) {
                } else {
                }
            });


        }, 200);
      })
    }
  }
});

Please suggest a solution either disable the directive or stop the scope.$watch function at the time of edit .

package · Accepted Answer · 2014-06-03 06:56:09Z

1

Can you add additional attribute to the input field indicating type of form action (create/edit) it is serving?

For example:

<input name="divId" type="text" class="form-control fL w250" ng-model="divisionData.DivisionID" ng-disabled="Disabled()" unique-divid form-action="edit" required />

If action type matches the one you want to ignore, just return from linking function.

link: function(scope, elem, attr, ctrl) { 
  if (attr.formAction === "edit") return;
  ..
}

In case you do not want to modify template, what is the indication in controller or scope that could be used to distinguish between new and existing divisionData? You could use that property as a flag to return from the unique-divid directive:

link: function(scope, elem, attr, ctrl) { 
  if (!scope.divisionData.isNew) return;
  ..
}

answered Jun 3, 2014 at 6:56

package

4,8011 gold badge28 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular js to disable directives based on condition

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related