How to change x-editable event order?

Question

I'm using angularJs and xeditables to create a web application.
In this application, I have several xeditable text following each others and the validation is done when pressing enter or clicking outside:

<div ng-repeat="answer in item.answers track by $index">    
    <input type="radio" name="{{item.label.text}}">&nbsp;<span editable-text="answer.text" onshow="onShow()" onhide="onClose()" buttons="no" blur="submit" onbeforesave="validateEditableText($data)">{{answer.text || "Edit this text"}}</span>
</div>

My functions onShow() and onClose() are the following :

$scope.onShow = function() {
  alert('onShow');
  if($scope.hideMenu == true)
    $scope.hideMenu = false;
};

$scope.onClose = function() {
      alert('onClose');
      if($scope.hideMenu == false)
        $scope.hideMenu = true;
    };

These functions are just changing a boolean to true.
I use this boolean to stop or not the event propagation (It may sounds weird but I need this functionality).

Here is my function which block the event propagation but it won't be necessary for you to fully understand it for the explications:

$scope.blocEventPropagation = function(event) {
  if($scope.selectedItem != null){
    if($scope.hideMenu && !$scope.selectedItem.dropDownOpen)
      event.stopPropagation();
    }
};

Actually the problem I have is, when I click on a xeditable text and then I click directly on another the events don't follow the order I want.
The order is onShow() of the first xeditable text when I click on it, onShow() of the second when I directly click on it before closing the other and onClose() of the first.
Me I'd like onShow() of the first when I click on it, onClose() on the first when I click a second one and onShow() of the second.

At this point read all the documentation of xeditable and I didn't found a solution. I tried to use a time-out to wait the other event but it didn't work.

Do you have an idea to change the event order or to limit the call of a function or even another solution that I didn't think about ?

Answer 1

You can have all elements give a separate contribution in hiding the menu:

  <div ng-repeat="answer in item.answers track by $index">    
        <input type="radio" name="{{item.label.text}}">&nbsp;<span editable-text="answer.text" onshow="{{$scope.hideMenu[$index] = true;}}" onhide="{{$scope.hideMenu[$index] = false;}}" buttons="no" blur="submit" onbeforesave="validateEditableText($data)">{{answer.text || "Edit this text"}}</span>
  </div>

And then, hide it if any element is shown:

<div id="menu" ng-hide="{{$scope.hideMenu.indexOf(true) >= 0}}" />

There may be syntax errors, but I hope it clarifies the point.

Answer 2

Finally I found a solution :

$scope.count = 0;

$scope.onShow = function() {
  $scope.count ++;
  if($scope.hideMenu == true)
    $scope.hideMenu = false;
};

$scope.onClose = function() {
  $scope.count --;
  if($scope.hideMenu == false && $scope.count == 0)
    $scope.hideMenu = true;
};

This solution is very ugly but I really think that with my actual knowledge its the better one in this very specific situation. I tried to find a better one but I couldn't.
Indeed, the previous answer works if we use onShow() and onClose() inside a ng-repeat with the $index . But me I use these two functions at different places in my application so I can't have an index.