AngularJS中angular-xeditable编辑表单点击外部不隐藏的实现方法

项目使用angular-xeditable v0.9.0时，点击editable-text字段能正常唤起编辑表单，但点击页面任意位置表单就自动隐藏，需要让表单保持激活状态。

之前尝试的两种方案均未生效：

1. 自定义指令阻止事件传播

app.directive('editableWithClickOutside', function($document) {
    return {
        link: function(scope, element) {
            $document.on('mouseup', function(event) {
                event.preventDefault();
                event.stopPropagation();
            });
        }
    }
});

2. 使用oncancel属性，但自定义的customCancel方法中$event参数为undefined
   对应的HTML代码：

<a
    href
    editable-text="item.desc"
    oncancel="customCancel($event)"
    class="has-text-weight-medium"
    ng-if="auth.is('user')"
>
    {{item.desc}}
</a>

有效解决方案 #

angular-xeditable本身提供了控制点击外部是否关闭编辑框的配置，针对v0.9.0可以通过以下两种方式实现：

方式一：全局配置（所有编辑框生效）

在应用的配置阶段设置全局选项，禁用点击外部关闭：

app.config(function($editableOptionsProvider) {
  // 将blur选项设为ignore，忽略外部点击关闭事件
  $editableOptionsProvider.setOption('blur', 'ignore');
});

方式二：单个元素配置（仅目标编辑框生效）

直接给目标editable-text元素添加blur="ignore"属性，精准控制：

<a
    href
    editable-text="item.desc"
    blur="ignore"
    class="has-text-weight-medium"
    ng-if="auth.is('user')"
>
    {{item.desc}}
</a>

之前方案无效的原因 #

• 自定义指令给$document绑定mouseup事件阻止传播，会干扰页面其他事件，且xeditable内部监听的事件可能不是mouseup，或者事件触发顺序导致拦截无效。
• oncancel回调在v0.9.0版本中并不支持传递$event参数，且该回调是编辑框取消时触发，无法阻止外部点击关闭的默认行为。

内容的提问来源于stack exchange，提问作者DzmitryMashuk