用于多个“字段”的 angularJS 内联编辑器

Question

以下代码-sn-p 使我能够编辑页面上的元素，但是，单击 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：

<div ng-controller="Profile">
    <div ng-controller="Editor">
        <h1 class="center" ng:hide="editorEnabled" ng:click="enableEditor()">{{person.name}}</h1>
        <span ng:show="editorEnabled">
            <form class="form-inline">
                <input type="text" size="30" name="name" ng:required ng-model="name">
                <button class="btn btn-success"  ng:click="save()">Ok</button>
                <button class="btn btn-warning" ng:click="disableEditor()">Cancel</button>
            </form>
        </span>
        <h5 class="center" ng:hide="editorEnabled" ng:click="enableEditor()">{{person.role}} @ {{person.company}}</h5>
        <span ng:show="editorEnabled">
            <form class="form-inline">
                <input type="text" size="30" name="role" ng:required ng-model="role"> @ <input type="text" size="30" name="company" ng:required ng-model="company">
                <button class="btn btn-success"  ng:click="save()">Ok</button>
                <button class="btn btn-warning" ng:click="disableEditor()">Cancel</button>
            </form>
        </span>
    </div>
</div>

Answer 1

我最有可能采用的方法是将新字段引入$scope，以标识哪个字段是可编辑的。然后你的ngShow 指令将包含一个expression，类似于以下内容：

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

您的 ngClick 指令看起来像这样：

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

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