2 Cancel buttons on Xeditable angular directive

Question

I'm using xeditable angular directive.Could you tell me how to use 2 cancel buttons ? B'cos I need to implement 2 functionalities on it.I mean cancel + my work 1 and cancel + my work 2. Thanks in advance.

HTML

<form editable-form name="tableform" onaftersave="saveTable()" oncancel="cancel()">

//UI code here

<button type="button" ng-disabled="tableform.$waiting" ng-click="tableform.$cancel()" class="btn btn-default">Cancel</button>

</form>

JS

// cancel all changes
  $scope.cancel = function() {

  };

JSFiddle

Answer 1

You can have 2 cancel buttons within the form and pass the form as attribute. Then in the corresponding cancel functions you can invoke form.$cancel and then do your logic. form.$cancel does the same work as invoking ng-click="tableform.$cancel()".

Play with it : Plunker

  //html
  <button type="button" ng-disabled="tableform.$waiting" ng-click="cancel1(tableform)" class="btn btn-default">cancel 1</button>
  <button type="button" ng-disabled="tableform.$waiting" ng-click="cancel2(tableform)" class="btn btn-default">cancel 2</button>

  //controller
  $scope.cancel1 = function(tableForm) {
    // Call tableForm cancel to reset
    tableForm.$cancel();
    //Logic1
  };

  $scope.cancel2 = function(tableForm) {
    // Call tableForm cancel to reset
    tableForm.$cancel();
    //Logic2
  };