如何更改x可编辑事件顺序

How to change x-editable event order?

本文关键字：事件 顺序 编辑 何更改      更新时间：2023-09-26


我正在使用angularJs和xeditables来创建一个web应用程序
在这个应用程序中，我有几个可编辑的文本，当按下回车键或点击外部时，就会进行验证：

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


我的函数onShow((和onClose((如下：

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


这些函数只是将布尔值更改为true
我使用这个布尔值来停止或不停止事件传播(这听起来可能很奇怪，但我需要这个功能(

以下是我的函数，它阻止事件传播，但您不必完全理解它来进行解释：

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

事实上，我遇到的问题是，当我点击一个可编辑的文本，然后直接点击另一个文本时，事件没有按照我想要的顺序进行
当我单击第一个可编辑文本时，其顺序是第一个文本的onShow()，当我在关闭另一个文本之前直接单击它时，第二个文本的顺序是onShow()，第一个文本是onClose()
我我点击第一个时想要onShow()，点击第二个时想要第一个的onClose()，第二个想要onShow()

此时，我阅读了xeditable的所有文档，但没有找到解决方案。我试着用一个暂停来等待另一个事件，但没有成功

你有没有改变事件顺序的想法，或者限制对函数的调用，甚至是其他我没有想过的解决方案

您可以让所有元素在隐藏菜单时提供单独的贡献：

  <div ng-repeat="answerswer in item.answers track by $index">    
        <input type="radio" name="{{item.label.text}}">&nbsp;<span editable-text="answerswer.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>

然后，如果显示任何元素，则隐藏它：

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

可能有语法错误，但我希望它能澄清这一点。

最后我找到了一个解决方案：

$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;
};

这个解决方案非常丑陋，但我真的认为，根据我的实际知识，在这种非常具体的情况下，它是更好的解决方案。我试着找一个更好的，但我找不到
事实上，如果我们在带有$index的ng-repeat中使用onShow()和onClose()，则前面的答案是有效的。但我在应用程序的不同位置使用这两个函数，所以我不能有索引

相关文章：