自定义和样式 Angular X 可编辑弹出框输入

Customizing & Styling Angular X-Editable Popover Input

我在我的项目中为 editable popover 使用 angular x-editable。我已成功将确认按钮的外观更改为我想使用的 .svg,并删除了取消按钮:

app.run(function(editableOptions, editableThemes) {
  editableOptions.theme = 'default';
  editableThemes[default].cancelTpl = '';
  editableThemes[default].submitTpl = '<img class="popoverSubmitBtn" 
    src="images/confirmationBtn.svg" ng-click="$form.$submit()">';
});

但是我在尝试更改 editableThemes[default].inputTpl 时遇到问题。似乎由于某种原因没有注册对 inputTpl 的更改。我想要的是弹出窗口中显示的输入框有一个圆形 'x' 按钮来清除当前输入 WITHIN 输入文本字段。

这实际上是原始 x-editable 中的默认行为(请参阅 Twitter typeahead.js 演示中的 here)。虽然有等效于使用 editableOptions.displayClearButton=true 的方法,但这会在输入框旁边创建一个完整的按钮,很像确认按钮,这不是我想要的。

我的计划是在此处使用提供 'clear' 按钮的指令并使用 editableThemes[default].inputTpl = '<input type="text" reset-directive>'; 但同样,它似乎已损坏。即使是这个未解决的问题 here 也让我相信它从未按预期工作。

有没有人对此感到幸运或知道任何可能对我的情况有帮助的解决方法?

另外 - 有点不相关但关于样式的主题,我如何移动弹出窗口显示的位置?目前,当我单击文本以激活弹出窗口时,它在光标所在位置的中间轻拍,但我希望它稍微高一点,在右边。

成功了。对于有类似问题的人:

  • 弹出窗口的样式可以通过安装后 bower_components 目录中的 xeditable.css 来控制
  • 虽然 inputTpl 没有按我预期的方式运行,但我添加了 使用 e-*(即 e-my-directive)对输入字段的自定义指令没有问题。