CODEWITHSUNDEEP
angularjsangularjs-directive
mcd
mcd

Reputation: 7136

AngularJS remove directive on clickaway

I am trying to figure out how to remove the directive on clickaway of the input field created by this directive when the user does not enter anything into the field. Right now the directive appears to work as planned except in the case where nothing is entered. Basically, if nothing entered directive is removed and/or some function called. I just want the directive template removed. Thanks.

DocumentManager.directive('clickAway', function($compile,$document, $location){

return {
replace: true,
scope: true,
template:'<input type="text"  class="form-control"  ng-model="item.name" placeholder="Enter name">',
restrict: 'AE',
 link: function(scope, elem, attr, ctrl) {
  elem.bind('click', function(e) {

    e.stopPropagation();
  });
  $document.bind('click', function() {
    if(scope.item == null){       
      return;
    };
    scope.createItem(scope.item);
    scope.item= null; });
}
}});

Upvotes: 0

Views: 89

Answers (1)

New Dev
New Dev

Reputation: 49590

You are almost there. You just need to add elem.remove();

$document.bind('click', function() {
    if(scope.item == null){
      elem.remove();       
      return;
    };
    scope.createItem(scope.item);
    scope.item = null; });
}

Just notice though, that as you implemented it, if item.name = "" (set externally), then the first click would not remove it, and will in fact createItem().

Upvotes: 1

Related Questions