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

Question

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

anubhava's helpful answer 我怎么能这样做？

     <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>

Answer 1

不是在指令中初始化scope.editState = false，而是可以从控制器中传递它。

设置指令以editState作为参数：

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

在控制器中的每个editState上创建一个faq变量，并带有一个切换功能：

控制器：

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

Controller的模板：

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

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

这是plnkr。