单击另一个元素时，将自动单击一个元素。 Angular.js

Question

我有一个指令可以单击某个项目，以后可以对其进行编辑。 该指令称为点击编辑。 我正在做ng-repeat，每行都是手风琴。 我的想法是单击“编辑”按钮，然后可以编辑文本，就像单击它一样。

我该怎么做？

     <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

无需在指令内部初始化scope.editState = false ，您可以将其从控制器中传入。

设置指令以将editState作为参数：

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

在控制器中的每个faq上创建一个editState变量，并使用一个函数对其进行切换：

控制器：

$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;
}

控制器模板：

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

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

这是一个plnkr 。