Angular Material 使可点击的 md-list-item 文本可选择

Question

我想让 md-list-item 中的文本 select 可用。但是，我发现当为元素设置 ng-click 时，整行变成一个按钮，使用户无法 select 元素上的任何文本。关于如何覆盖此功能的任何想法？

代码如下：

Answer 1

这会很难看。当 ng-click 出现时，它会在每一行的顶部生成一个按钮，并向每个字段添加 'user-select: none' 。这就是为什么它不能 selectable。

如果你真的想让它select可用，你可以在字段上设置 z-index 将它带到前面并设置 user-select: text 使它 select能。此外，最好使用 span 而不是 div，因为 span 具有动态宽度。

类似的东西应该可以工作：-

<md-list-item xxxx>
   <span style="z-index:10000;user-select:text;"> Return </span>
</md-list-item>

请参阅示例的最后一部分 http://codepen.io/anon/pen/WwdMwr

Answer 2

Angular Material 没有在文档中指定此行为。但是在 md-list-item 上添加 ng-click="false" 也可以。

<md-list-item ng-click="false">
  <span>...</span>
  <a ng-click="f()">...</a>
</md-list-item>

Angular Material make clickable md-list-item text selectable