在UI.Bootstrap中使用X-editable Tabular标题指令在AngularJs中

Question

我有一个AngularJs应用程序，我们使用UI.Bootstrap标签来创建和删除工作区。
我想要使用的X编辑编辑工作区/标签的名称，但该选项卡头指令中：

<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]); 
     }