How To Modify This Directive, So That Once The Input Is Visible, It Won't Be Hidden Unless The X Is Clicked?

http://plnkr.co/edit/fXo21LnphHZ3qWnuEMFt?p=preview Right now, if you click anywhere outside of the input, the focusMe directive scope.$watch will trigger and turn showingTagSearch

Solution 1:

Remove the blur event from focusMe directive which is hidding div on blur.

Instead of that call ng-click event that will set showingTagSearchInput to false & element will get hidden.

Markup

<input type="text"
       focus-me="showingTagSearchInput"
       placeholder="search for a tag"
       ng-model="tagSearchInput"class="form-control">
<divclass="btn-close"ng-click="closeMe()">close x</div>

Code

$scope.hideInput = function(){
   $scope.showingTagSearchInput = false;
};

Demo Plunkr

Solution 2:

The problem comes from focus-me directives that, when is not anymore focus, invert your variable.

See updated plunkr for a solution http://plnkr.co/edit/443rVbs2onbx96aq4eaf?p=preview

I have created a new variable, that is initiate here :

function quickSearchTags() {
    vs.showingTagSearchInput = !vs.showingTagSearchInput;
    vs.focusMe = true;
  }

And your directive is called like that :

<inputtype="text"
                 focus-me="focusMe"
                 placeholder="search for a tag"
                 ng-model="tagSearchInput"class="form-control">