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

【问题标题】：Using X-editable within UI.Bootstrap tab-heading directive in AngularJs在 AngularJs 中的 UI.Bootstrap 选项卡标题指令中使用 X-editable
【发布时间】：2014-01-29 05:27:03
【问题描述】：

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

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

事实上，它提供了一个内联的点击编辑功能，但不会在保存时更新范围。

这是小提琴：http://jsfiddle.net/RDfTu/

【问题讨论】：

我也有同样的问题。我为此提交了一个问题，因为似乎没有其他人知道解决方案。

标签： javascript angularjs angular-ui-bootstrap x-editable

【解决方案1】：

如果查看生成的html：

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

独立的范围不继承自任何范围，因此您的“item.title”不存在于此范围内，也不存在于其下方的任何范围内，您的选项卡标题所在的位置以及 x-editable 正在创建它的控制器的位置。

【讨论】：

好吧，这是有道理的。是否有任何不涉及更改任何第三方库（如 angular）代码的问题的解决方法？
我不确定，但对我来说似乎不会有。

【解决方案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]);
      }

【讨论】：