使用xeditable的自定义AngularJS指令：第一次不起作用，但后续工作

Question

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

编辑，删除和取消按钮逻辑在每个表中实现起来有点麻烦，我创建了一个自定义指令：{{ 1}}。

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

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

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

但最奇怪的是：第二次用户点击[添加]，它只是起作用。然后它继续工作！

（这让我疯了）

在HTML中，该指令以这种方式调用：

sen-edit-row

在JS中，指令定义为：

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

指令的模板：

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

我还创建了一个Plunker that shows evidence of this behavior。

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

谢谢！