Javascript 用于多个'；字段'；

下面的代码片段使我能够编辑页面上的元素，但是，单击p标记，其他所有标记也会更改为内联编辑器模式。如何重新编写此脚本，使其仅为单击的P标记启用编辑器

JS代码：

function Profile($scope) {
  $scope.person = {
    name : "Test Name",
    company : "Test",
    role : "Test Role"
  };

}

function Editor($scope) {
  $scope.editorEnabled = false;
  $scope.enableEditor = function() {
    $scope.editorEnabled = true;
    $scope.name = $scope.person.name;
    $scope.company = $scope.person.company;
    $scope.role = $scope.person.role;
  },

  $scope.disableEditor = function() {
    $scope.editorEnabled = false;
  },

  $scope.save = function() {
    $scope.person.name = $scope.name; //var = input.value
    $scope.person.company = $scope.company;
    $scope.person.role = $scope.role;
    $scope.disableEditor();
  }
}

HTML:

{{person.name}
好啊
取消
{{person.role}}@{{person.company}
@ 
好啊
取消

我最可能采用的方法是在

$scope

中引入新字段，以确定哪个字段是可编辑的。然后，您的

ngShow

指令将包含一个大致如下的内容：

<span ng:show="editable == 'company'">

---

您的取消按钮会将此设置为null，并且您的启用/禁用编辑器功能将消失。记住这一切都是我的头绪，希望它能为你指明正确的方向。如果有机会的话，我会改进这个答案。

只要把它扔出去，如果你喜欢，就用它，如果你不喜欢，就用它。使用指令。与AngularJS合作过。。。大约一个小时。。。我想这超出了我的理解能力：）我看了一下，公平地说，我了解指令的25%。目前还有其他选择吗？它确实把我带到了正确的方向：{{person.name}}不过我还有一个问题，“ng:click”和“ng-click”（注意：和-）之间有区别吗。谢谢！！：）

<span ng:show="editable == 'company'">

<h1 ng:click="editor = 'company'">