x-editable嵌套可编辑选择不提交

Question

当我提交嵌套的可编辑选择更改时，它没有调用onaftersave指定的函数（'vm.addOperation（）'），我有一个可编辑选择嵌套在其他内部，它还显示外部可编辑选择编辑表单。

我希望它只是显示嵌套的编辑窗体和函数调用工作。

我的html代码：

<div editable-select="vm.selectedUser" 
    e-ng-options="user.objectId as user.displayName for user in vm.users" 
    onshow="vm.getUsers()" 
    onaftersave="vm.addUser()"> 
     <div class="container" ng-repeat="u in entity.authorizedUsers"> 
      <div class="row"> 
       <div class="col-xs-2"> 
       {{u.id}} 
       </div> 
       <div class="col-xs-4"> 
       <div editable-select="vm.selectedOperation" 
         e-ng-options="operation.id as operation.name for operation in vm.operations" 
         onshow="vm.getOperations()" 
         onaftersave="vm.addOperation()"> 
         <div class="container" ng-repeat="op in u.authorizedOperations"> 
          <div class="row"> 
          <div class="col-xs-3"> 
           {{op.name}} 
          </div> 
          <div class="col-xs-push-2"> 
           <button class="btn btn-xs btn-danger" 
             ng-click="vm.removeOperation(entity.id, u.id, op.id)"> 
            <i class="fa fa-trash-o"></i> 
           </button> 
          </div> 
         </div> 
         </div> 
        </div> 
       </div> 
       <div class="col-xs-push-4"> 
       <button class="btn btn-xs btn-warning pull-left" 
         ng-click="vm.removeuser(entity.id, u.id)"> 
        <i class="fa fa-trash-o"></i> 
       </button> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

我设法用下面的代码解决问题。这是一个丑陋的解决方法，如果有人有更优雅的解决方案，我会非常感激。

在HTML

：

<div editable-select="vm.selectedOperation" 
     e-form ="nestedForm" 
     onshow="vm.getOperations()" 
     ng-click="nestedForm.$show(); vm.xEditableNestedFormFix(nestedForm); $event.stopPropagation()" 
     e-ng-options="operation.id as operation.name for operation in vm.operations" 
     onaftersave="vm.addOperation()"> 

在JS：

vm.xEditableNestedFormFix = function (form) { 
    var editorElement = form.$editables[0].controlsEl[0].firstChild; 
    editorElement.onclick = function (event) { 
     event.stopPropagation(); 
    } 
    var submitButton = form.$editables[0].buttonsEl[0].firstChild 
    submitButton.onclick = function (event) { 
     form.$submit(); 
     event.stopPropagation(); 
    } 
    var cancelButton = form.$editables[0].buttonsEl[0].lastChild 
    cancelButton.onclick = function (event) { 
     event.stopPropagation(); 
    } 
}