Javascript 在AngularJs中的UI.Bootstrap选项卡标题指令中使用X-editable

我有一个AngularJs应用程序，我们使用UI.Bootstrap选项卡创建和删除工作空间。
我想使用X-editable编辑工作区/选项卡的名称，但在tab header指令中：

<tab-heading>
    <span editable-text="item.title">{{item.title}}</span>
</tab-heading>

{{item.title}

实际上，它会在单击时进行内联编辑，但在保存时不会更新范围。

---

下面是小提琴：

如果您查看生成的html：

<tabset class="ng-isolate-scope ng-scope">

---

独立作用域不会从任何作用域继承，因此您的“item.title”不存在于该作用域中，也不存在于它下面的任何作用域中，即选项卡标题所在的位置，以及x-editable正在创建它的控制器的位置。

我也有同样的问题，在我的情况下，我可以使用

blur

属性解决它：

<tab-heading>
   <span editable-text="tab.name" onbeforesave="validate($data)" buttons="no" blur="submit">{{ tab.name}}</span>
 </tab-heading>

---

我也有同样的问题。我为此提交了一个问题，因为似乎没有其他人知道解决方案。好吧，这是有道理的。对于这个问题，有没有什么不涉及从任何第三方库（如angular）更改代码的解决方案？我不确定，但对我来说似乎不会有。

if (shown[i]._blur === 'submit') {
        toSubmit.push(shown[i]);
      }