angularJS встроенный редактор для нескольких «полей»

Question

Следующий фрагмент кода позволяет мне редактировать элементы на странице, однако, нажав на теги 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'"> 

Ваша кнопка будет установить это обнулить отменить и ваш включить/выключить функции редактора исчезнут. Имейте в виду, что все это на верхушке моей головы, надеюсь, это указывает на то, что вы в правильном направлении. Я улучшу этот ответ, если у меня появится шанс.