Xeditable Formular ist speichern Formular ohne es selbst anzuzeigen

Question

Ich versuche, ein xeditable Formular wie hier demonstriert zu erstellen: https://vitalets.github.io/angular-xeditable/#editable-form.

Ich habe die Anweisungen genau befolgt, aber mein Formular funktioniert nicht. Ich möchte eine Ressource speichern, aber wenn ich auf die Schaltfläche Bearbeiten klicke, die das Formular anzeigen soll, überspringt es die Bearbeitungsphase und löst sofort die saveResource-Funktion aus - was nur passieren sollte, wenn das Formular gespeichert wird.

Ich habe meinen Code immer wieder mit der Dokumentation verglichen und kann nicht herausfinden, was ich falsch mache.

HTML

<form editable-form name="editResourceForm" onaftersave="saveResource()"> 
    <p> 
     <strong editable-text="resource.title" e-name="title"> 
     {{resource.title}} 
     </strong> 
    </p> 
    <div class="col-xs-12 col-sm-4"> 
     <button ng-click="editResourceForm.$show()" ng-show="!editResourceForm.$visible">Edit</button> 
     <!-- buttons to submit/cancel form --> 
     <span ng-show="editResourceForm.$visible"> 
     <button type="submit" class="btn btn-primary" ng-disabled="editResourceForm.$waiting">Save</button> 
     <button type="button" class="btn btn-default" ng-disabled="editResourceForm.$waiting" ng-click="editResourceForm.$cancel()">Cancel</button> 
     </span> 
    </div> 
    </form> 

JS

app.controller('Ctrl', function($scope, $filter) { 
    $scope.resource = { 
    title: 'awesome resource' 
    }; 

    $scope.saveResource = function() { 
    console.log("Save resource"); 
    } 

}); 

JSFIDDLE HERE

Sie können sehen, dass es versucht, das Formular zu speichern, weil jedes Mal, wenn die Schaltfläche Bearbeiten geklickt wird, werden die Konsolenprotokolle " Ressource speichern ". Dies sollte nicht passieren, wenn auf die Schaltfläche Bearbeiten geklickt wird.

Answer 1

@ckosloski beantwortet diese auf Github:

Ich denke, es liegt daran, Ihre Schaltfläche Bearbeiten nicht auf eine Schaltfläche Typ angeben. Standardmäßig ist der Schaltflächentyp submit. Sie klicken also auf die Schaltfläche und senden das Formular, da es sich um eine Absenden-Schaltfläche handelt. Versuchen Sie Hinzufügen type="button" zu Ihrer Bearbeitungsschaltfläche.

Hinzufügen dieser gelöst, wie Sie von der aktualisierten JSFiddle sehen können.