2016-09-22 29 views
0

ネストされた編集可能な選択変更をサブミットするときにonaftersave割り当て関数( 'vm.addOperation()')を呼び出さず、それはまた、outter editable-select編集フォームを表示します。x編集可能なネスト編集可能選択しない投稿

ネストされた編集フォームと関数呼び出しを表示するだけです。

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

答えて

0

私は、次のコードで問題を解決するために管理してきました。それは醜い回避策thoです、もし誰かが私は非常に感謝するよりエレガントなソリューションを持ってください。 HTMLで

:jsの中

<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()"> 

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(); 
    } 
} 
関連する問題