Question

我有一个可编辑的选择嵌套在其他内部，当我提交嵌套的可编辑选择更改时，它不会调用onaftersave分配的函数（'vm.addOperation（）'），它还会显示outter editable-select edit形式。

我希望它只是显示嵌套的编辑表单和函数调用。

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

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

in 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();
    } 
}

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

1 个答案: