xeditable onbeforesave not firing

Question

I'm having issues with the xeditable directive. The onbeforesave is not firing, even though the in-place editing works fine on the client side. I can't get any reaction out of either onbeforesave or onaftersave.

I've included angular version 1.5.0 in my project. I'm setting up the element like this, it's in a table:

<tr ng-repeat="job in jobs">
  <td>{{ job._id }}<i ng-click="removeJob(job._id)" class="fa fa-trash-o" aria-hidden="true"></i></td>
  <td>{{ job.title }}</td>
  <td editable-text="job.description" onbeforesave="alert('hello');">{{ job.description || "empty" }}</td>
</tr>

But I haven't been able to make the alert go off when clicking save.

Answer 1

If you look at the documentation:

One way to submit data on server is to define onbeforesave attribute pointing to some method of scope

The onbeforesave is taking in a scope method, so alert('hello') in this case is trying to call some $scope.alert method that doesn't exist. To make this work try something like

// in your controller

$scope.test = function(data) {
    alert(data);
};

// in your template

<tr ng-repeat="job in jobs">
  <td>{{ job._id }}<i ng-click="removeJob(job._id)" class="fa fa-trash-o" aria-hidden="true"></i></td>
  <td>{{ job.title }}</td>
  <td editable-text="job.description" onbeforesave="test($data)">{{ job.description || "empty" }}</td>
</tr>