Javascript ng单击以使用angular指令替换DOM元素

所以我想知道是否有可能在一个span上有一个ng click语句，当单击该语句时，它将用一个指令（用它的模板、绑定等）替换span内容

范例

 <div class="col-xs-12">
    <span ng-click="edit"> {{ user.name }} - {{ user.lastWin }} </span>
        <button ng-click="removeUser(user.name)" class="btn btn-danger pull-right margin-right-10">Remove User</button>
  </div>

{{user.name}}-{{user.lastWin}
删除用户

然后，编辑将如下所示：

<form name="editUser">
  <input type="text" name="name" ng-model="name" placeholder="Name"/>
  <input type="text" ng-model="lastWin" placeholder="Last Win"/>
</form>
<button ng-click="editUser($index, { name: name, lastWin: lastWin })" class="btn">Save</button>

拯救

---

我需要在我的控制器上做些什么才能让它正确地交换所有内容？

我会使用

ng if

来完成整个过程，而不需要额外的javascript

大概是这样的：

<div class="col-xs-12" ng-if="!edit">
    <span ng-click="edit = true"> {{ user.name }} - {{ user.lastWin }} </span>
    <button ng-click="removeUser(user.name)" class="btn btn-danger pull-right margin-right-10">Remove User</button>
</div>
<div ng-if="edit">
    <form name="editUser">
      <input type="text" name="name" ng-model="name" placeholder="Name"/>
      <input type="text" ng-model="lastWin" placeholder="Last Win"/>
    </form>
    <button ng-click="editUser($index, { name: name, lastWin: lastWin })" class="btn">Save</button>
</div>

{{user.name}}-{{user.lastWin}
删除用户
拯救

如果视图中的逻辑正常，则显示ng。 如果您想摆脱ng，请在html中声明两个模板

<script type='text/ng-template' id='view'>
<!--Read only content here-->
<script>

<script type='text/ng-template' id='edit'>
<!--Form content here-->
<script>

在控制器中，您可以根据

ng单击中的当前状态设置activeTemplate

if(edit) {
   $scope.template='edit';
}
else {
   $scope.template='view';
}

范围应该是指令的一部分。或者在单击时隐藏自己并显示表单输入。无需将其作为指令。视图逻辑属于视图。否则，只需在控制器中创建一个执行相同操作的函数即可。
if(edit) {
   $scope.template='edit';
}
else {
   $scope.template='view';
}