以下代碼片段使我可以編輯頁面上的元素，但是，單擊P標籤，所有其他元素也會變爲內嵌編輯器模式。我怎樣才能重寫這個腳本，這樣它只能使編輯器點擊P標籤？angularJS多個'字段'的內嵌編輯器

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>

來源

2013-05-07 Tamas

只要把它扔出去，如果你喜歡它，就使用它，如果不把它扔回去。使用指令。 – 2013-05-07 01:26:14

與AngularJS一起工作了大約一個小時......我認爲這是對我的頭atm的方式:)我有一個看，並在所有公平我瞭解約25％的指令是關於。暫時還有其他選擇嗎？ – Tamas 2013-05-07 01:31:43

的方式，我將最有可能的做法是將引入新的領域爲$scope指出哪些字段可編輯。然後你ngShow指令將包含一個expression，沿着這些路線的東西：

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

你ngClick指令會是這個樣子：

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

你的取消按鈕將它設置爲空，您啓用/禁用編輯器功能將不復存在。請記住，這一切都是我的頭頂，希望它能指引您朝着正確的方向前進。如果我有機會，我會改進這個答案。

來源

2013-05-07 18:18:28 tnajdek

它確實發送給我正確的方向：

< span ng-show =「editable =='name'」> – Tamas 2013-05-08 01:12:38

但是我還有一個問題，是否在「ng：click」和「ng-click」之間有區別（注意：和 - ）。謝謝！！ :) – Tamas 2013-05-08 01:13:07

angularJS多個'字段'的內嵌編輯器

回答

{{person.name}}

相關問題