Onbeforesave with no buttons
by ckosloski
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="http://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://vitalets.github.io/angular-xeditable/dist/css/xeditable.css">
<script src="http://code.angularjs.org/1.0.8/angular-mocks.js"></script>
<h4>Angular-xeditable Onbeforesave (Bootstrap 3)</h4>
<div ng-app="app" ng-controller="Ctrl">
<a href="#" editable-text="user.name" onbeforesave="updateUser($data)" buttons="no">
{{ user.name || 'empty' }}
</a>
<div style="margin-top: 30px">
{{ user | json }}
</div>
</div>
CSS
div[ng-app] { margin: 50px; }
JavaScript
var app = angular.module("app", ["xeditable", "ngMockE2E"]);
app.run(function(editableOptions) {
editableOptions.theme = 'bs3';
});
app.controller('Ctrl', function($scope, $q, $http) {
$scope.user = {
id: 1,
name: 'awesome user'
};
$scope.updateUser = function(data) {
window.console.log("test")
return $http.post('/updateUser', {id: $scope.user.id, name: data});
};
});
// mock `/updateUser` request
app.run(function($httpBackend) {
$httpBackend.whenPOST(/\/updateUser/).respond(function(method, url, data) {
data = angular.fromJson(data);
if(data.name === 'error') {
return [500, 'Error message'];
} else {
return [200, {status: 'ok'}];
}
});
});