HTML：使链接可编辑

Question

我有一个角度页面，从列表中显示一系列链接。 这是HTML / Angular代码：

<li role="menuitem"
    ng-repeat="foo in foos track by $index"
    ng-click="selectFoo(foo)">
    <a href="#">
        {{foo}}
        <span class="glyphicon glyphicon-pencil pull-right"></span>
    </a>
</li>

我希望用户能够通过单击glyphicon来编辑foo的显示名称。 我可以通过在<span>添加ng-click组件并使用文本输入等打开模态来轻松实现此目的。

但我想以更简化的方式来做。 是否有可能让glyphicon单击将链接更改为文本输入，用户可以在其中输入内容，点击Enter并完成编辑。 我不想将<a>设为文本输入，因为单击它会执行其他操作。 有什么方法可以实现我想要的吗？

Answer 1

您可以使用AngularJS在显示{{foo}}和显示绑定到foo的<input>之间切换：

<li role="menuitem"
    ng-repeat="foo in foos track by $index">
  <span data-ng-hide="foo.isEditing" data-ng-model="foo"></span>
  <input type="text" data-ng-show="foo.isEditing" data-ng-model="foo">
  <a data-ng-click="foo.isEditing = !foo.isEditing" href="#">
    <span class="glyphicon glyphicon-pencil pull-right"></span>
  </a>
</li>

因此，当用户点击glyphicon那么就应该切换的状态foo.isEditing从false到true ，反之亦然。 span和input都通过ng-model绑定到foo ，因此对foo更新会立即发生。 让我知道这是否行得通，加油！

Answer 2

在目标范围元素上设置contentEditable属性应该是人们想要的最简单的解决方案。 例如：

<span class="glyphicon glyphicon-pencil pull-right" contentEditable="true"></span>

同样，通过脚本控制它（很可能通过实现on / off toggle）也很容易。