在AngularJs中的UI.Bootstrap tab-heading指令中使用X-editable

Question

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

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

实际上，它会点击内嵌编辑，但不会在保存时更新范围。

继承人的小提琴：http://jsfiddle.net/RDfTu/

Answer 1

如果你看一下生成的html：

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

隔离范围不会从任何范围继承，因此您的“item.title”不存在于此范围内，也不存在于其下方的任何范围内，标题标题位于其中，并且x-editable正在创建它的控制器。

Answer 2

我遇到了同样的问题，在我的情况下，我能够使用blur属性来解决它：

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

请参阅documentation。

另请参阅xeditable.js中的以下代码：

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