1

构建一个 AngularJS 应用程序，我使用xeditable来允许用户编辑一个表，每行一行（如此处所述：xeditable）。

在每个表中实现的Edit、Remove和Cancel按钮逻辑有点麻烦，我创建了一个自定义指令：sen-edit-row.

自定义指令中按钮的逻辑运行良好......除了一种情况。

当用户单击 [Add] 时，会添加一行（就像在xeditable的示例中一样），并且新行可以立即编辑。或者应该！

第一次，该行不可编辑。输入字段不是由xeditable创建的。我自己指令的按钮仍然有效。

但最离奇的是：用户第二次点击【添加】，就可以正常使用。然后它继续工作！

（这让我发疯）

在 HTML 中，指令是这样调用的：

    <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>

在 JS 中，指令定义为：

angular.module("app", ["xeditable"]).directive("senEditRow", [function() {
return {
    restrict: "A",
    templateUrl: "sen-edit-row.html",
    scope: {
        save: "&",
        remove: "&",
        shown: "="
    },
    link: function(scope, element, attrs) {
    }
}
}])

以及指令的模板：

<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>

我还创建了一个Plunker 来显示这种行为的证据。

问题：如何使我的指令和xeditable始终如一地工作，包括第一次，并在将行添加到表时立即激活？

谢谢！

4

0 回答 0