javascript - 在 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>

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

这是 fiddle :http://jsfiddle.net/RDfTu/

Answer 1

如果您查看生成的 html:

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

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