Question

我目前有一个动态编辑字段的指令。我在手风琴的标题中有一个要编辑的字段和手风琴内容中的另一个字段。如果单击编辑按钮，则可以编辑相应行中的字段，这样可以正常工作。我的问题是当我保存或取消它时（当我点击保存或取消按钮时）立即消失标题和标题内容的文本字段。我需要文本字段仅对我要保存或取消的项目消失。当您单击编辑按钮时，标题和内容中都会出现2个文本字段（这样可以）。单击保存或取消时，所选元素中的文本字段应消失/显示。

  <div ng-controller="AccordionDemoCtrl">

     <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  edit-state='faq.editState' 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 edit-state='faq.editState'  ng-model="faq.respuesta" >{{faq.respuesta}}</span>

          </div>
        </div>
        <div class="col-sm-1"  >
          <button type="button" ng-click="toggleEditState($index)"   class="btn btn-default">
            <span class="glyphicon glyphicon glyphicon-edit"></span> 
          </button>
        </div>
      </div>
     </uib-accordion>
  </div>

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

Answer 1

对editState

使用单向（单向）绑定

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

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

Answer 2

我相信您需要在控制器级别管理两个单独的布尔值，因此一个指令不会覆盖另一个指令的状态，然后您必须使用打开按钮设置两个布尔值。我保持主状态，所以你的字形按钮将打开或关闭两者，保存/取消应该彼此独立运行。

$scope.editState = false;
$scope.editHeader = false;
$scope.editBody = false;

$scope.toggleEditState = function(index, val) {
  debugger;
  $scope.editState = !$scope.editState;
  $scope.faqs[index].editHeader = $scope.editState;
  $scope.faqs[index].editBody = $scope.editState;
}


     <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  edit-state='faq.editHeader' 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 edit-state='faq.editBody'  ng-model="faq.respuesta" >{{faq.respuesta}}</span>

          </div>
        </div>
        <div class="col-sm-1"  >
          <button type="button" ng-click="toggleEditState($index)"   class="btn btn-default">
            <span class="glyphicon glyphicon glyphicon-edit"></span> 
          </button>
        </div>

https://plnkr.co/edit/91cGWoTKyJsZQKxYapiT?p=preview

如果您希望输入字段打开和关闭两者，您也可以将主状态与指令进行通信。

单击按钮编辑项目。 Angular.js

2 个答案: