Klicken Sie automatisch auf ein Element, wenn Sie auf ein anderes Element klicken. Angular.js

Question

Ich habe eine Direktive, um auf ein Element zu klicken und kann später bearbeitet werden. Diese Anweisung heißt Click-to-Edit. Ich mache eine ng-Wiederholung, und jede Reihe ist ein Akkordeon. Meine Idee ist es, die Bearbeitungsschaltfläche zu ziehen, und ich kann den Text bearbeiten, als ob ich darauf geklickt hätte.

wie kann ich es tun?

 <uib-accordion close-others="true"> 
    <div ng-repeat="faq in faqs"> 
     <div class="col-sm-11" > 
      <div uib-accordion-group class="panel-default" is-open="faq.open"> 
       <uib-accordion-heading > 
        <span ng-click="ignoreClick($event);" ><a href='' click-to-edit ng-model='faq.pregunta' typeinput='textarea' >{{faq.pregunta}}</a></span> <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': faq.open, 'glyphicon-chevron-right': !faq.open}"></i> 
       </uib-accordion-heading> 
       <span click-to-edit ng-model="faq.respuesta" >{{faq.respuesta}}</span> 
      </div> 
     </div> 
     <div class="col-sm-1" > 
      <button type="button" class="btn btn-default"> 
      <span class="glyphicon glyphicon glyphicon-edit"></span> 
      </button> 
     </div> 
     </div> 
    </uib-accordion> 

https://plnkr.co/edit/K5fXaIzSBkV91V7AFoqw?p=preview

Answer 1

Statt scope.editState = false in der Richtlinie zur Initialisierung, können Sie es von Ihrem Controller übergeben.

Richten Sie Ihre Richtlinie editState als Parameter zu nehmen: auf jeden faq in Ihrem Controller

scope: { 
    model: '=ngModel', 
    editState: '=' 
} 

Eine editState Variable, mit einer Funktion, die sie wechseln:

Controller:

$scope.faqs=[ 
    {"pregunta": "pregunta1", "respuesta": "respuesta1", "open":true, "editState": false}, 
    {"pregunta": "pregunta2", "respuesta": "respuesta2", "open":false, "editState": false}, 
    {"pregunta": "pregunta3", "respuesta": "respuesta3", "open":false, "editState": false} 
    ]; 

$scope.toggleEditState = function(index) { 
    $scope.faqs[index].editState = !$scope.faqs[index].editState; 
} 

Steuerungsvorlage:

<a click-to-edit edit-state='faq.editState' ... > 

<button ng-click="toggleEditState($index)"></button> 

Hier ist ein plnkr.