<!DOCTYPE html>
<html>
<head>
<script data-require="angular.min.js@1.6.7" data-semver="1.6.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<script data-require="xeditable@0.1.8" data-semver="0.1.8" src="https://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<link data-require="bootstrap-css@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link data-require="xeditable@0.1.8" data-semver="0.1.8" rel="stylesheet" href="https://vitalets.github.io/angular-xeditable/dist/css/xeditable.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="accessCtrl">
<h1>Weird behavior of custom directive with xeditable</h1>
<p>In the table below, click [Add Entry] to add en entry:</p>
<ol>
<li>First time, the row is created and is <b>NOT</b> editable (xeditable.$show() hasn't been called, or shown != true?)</li>
<li>Second time and onward, the row is created the the form is editable (???)</li>
</ol>
<p>Expected behavior: the form should be editable.</p>
<table class="table table-condensed table-striped">
<thead>
<tr>
<th class="col-md-4">User</th>
<th class="col-md-4">Host</th>
<th class="col-md-2">Mode</th>
<th class="col-md-2"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="access in denyAccessTable">
<td class="col-md-4"><div editable-text="access.user" e-form="rowForm">{{ access.user }}</div></td>
<td class="col-md-4"><div editable-text="access.host" e-form="rowForm">{{ access.host }}</div></td>
<td class="col-md-2"><div editable-text="access.mode" e-form="rowForm">{{ access.mode }}</div></td>
<td class="col-md-2"><div sen-edit-row save="saveDenyAccess()" remove="removeDenyAccess($index)" shown="access == newDenyAccess"></div></td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-primary" ng-click="addDenyAccess()">Add Entry</button>
</div>
</body>
</html>
// Code goes here
angular.module("app", ["xeditable"]).directive("senEditRow", [function() {
return {
restrict: "A",
templateUrl: "sen-edit-row.html",
scope: {
save: "&",
remove: "&",
shown: "="
},
link: function(scope, element, attrs) {
}
}
}]).controller("accessCtrl", ["$scope", function($scope) {
// Empty data
$scope.denyAccessTable = [];
// Add deny access
$scope.addDenyAccess = function() {
$scope.newDenyAccess = { user: 'deny', host: '', mode: '' };
$scope.denyAccessTable.push($scope.newDenyAccess);
};
// Save deny access
$scope.saveDenyAccess = function(data) { /* Don't care */ };
// Remove deny access
$scope.removeDenyAccess = function(index) {
$scope.denyAccessTable.splice(index, 1);
};
}]);
# Weird Behavior of xeditable with a Custom Directive
## Goal
In an AngularJS app, we use **xeditable** to allow the user to edit a table, a row at once.
The buttons to *Edit*, *Remove* and *Cancel* and their logic is cumbersome, so I though of creating a directive for that.
## Problem
The [Add] button is supposed to add a row **AND** make this row editable, i.e. the xeditable form is activated immediately.
The very **FIRST** time the user clicks on the [Add] button, the row is **NOT** editable => problem!
The **SECOND** time and after that, the row is made editable! This is cool, but why??
<div style="white-space: nowrap">
<form class="form-inline" editable-form name="rowForm" onaftersave="save()" ng-show="rowForm.$visible" shown="shown">
<button type="submit" class="btn btn-primary" ng-disabled="rowForm.$waiting">Save</button>
<button type="button" class="btn btn-link" ng-disabled="rowForm.$waiting" ng-click="shown ? remove() : rowForm.$cancel()">Cancel</button>
</form>
<!-- Buttons to edit and remove -->
<div ng-hide="rowForm.$visible">
<a href="" ng-click="rowForm.$show()" ng-hide="showDeleteButton"><span class="glyphicon glyphicon-edit" style="margin-right: 5px;"></span>Edit</a>
<a href="" ng-click="showDeleteButton = true" ng-hide="showDeleteButton"><span class="glyphicon glyphicon-trash" style="margin-left: 10px; margin-right: 5px;"></span>Remove</a>
<button class="btn btn-danger" ng-click="remove()" ng-show="showDeleteButton">Remove</button>
<button class="btn btn-link" ng-click="showDeleteButton = false" ng-show="showDeleteButton">Cancel</button>
</div>
</div>