如何更改 x-editable 事件顺序?
How to change x-editable event order?
我正在使用 angularJs 和 xeditables 创建 Web 应用程序。
在此应用程序中,我有几个可编辑的文本彼此跟随,并且在按回车键或单击外部时完成验证:
<div ng-repeat="answer in item.answers track by $index">
<input type="radio" name="{{item.label.text}}"> <span editable-text="answer.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();
}
};
实际上我遇到的问题是,当我单击可编辑的文本然后直接单击另一个文本时,事件没有按照我想要的顺序进行。
当我点击它时,顺序是第一个 xeditable 文本的 onShow()
,当我在关闭另一个之前直接点击它时第二个的 onShow()
和第一个的 onClose()
。
我想要第一个 onShow()
当我点击它时, onClose()
当我点击第二个时第一个和 onShow()
第二个。
此时阅读了xeditable的所有文档,我没有找到解决方案。我尝试使用超时来等待其他事件,但它没有用。
您是否有更改事件顺序或限制函数调用或什至是我没有想到的其他解决方案的想法?
您可以让所有元素单独贡献隐藏菜单:
<div ng-repeat="answer in item.answers track by $index">
<input type="radio" name="{{item.label.text}}"> <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>
然后,如果显示任何元素,则将其隐藏:
<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()
,那么前面的答案是有效的。但是我在我的应用程序的不同地方使用这两个函数,所以我没有索引。
我正在使用 angularJs 和 xeditables 创建 Web 应用程序。
在此应用程序中,我有几个可编辑的文本彼此跟随,并且在按回车键或单击外部时完成验证:
<div ng-repeat="answer in item.answers track by $index">
<input type="radio" name="{{item.label.text}}"> <span editable-text="answer.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();
}
};
实际上我遇到的问题是,当我单击可编辑的文本然后直接单击另一个文本时,事件没有按照我想要的顺序进行。
当我点击它时,顺序是第一个 xeditable 文本的 onShow()
,当我在关闭另一个之前直接点击它时第二个的 onShow()
和第一个的 onClose()
。
我想要第一个 onShow()
当我点击它时, onClose()
当我点击第二个时第一个和 onShow()
第二个。
此时阅读了xeditable的所有文档,我没有找到解决方案。我尝试使用超时来等待其他事件,但它没有用。
您是否有更改事件顺序或限制函数调用或什至是我没有想到的其他解决方案的想法?
您可以让所有元素单独贡献隐藏菜单:
<div ng-repeat="answer in item.answers track by $index">
<input type="radio" name="{{item.label.text}}"> <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>
然后,如果显示任何元素,则将其隐藏:
<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()
,那么前面的答案是有效的。但是我在我的应用程序的不同地方使用这两个函数,所以我没有索引。