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

Question

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

以下是代码：

Answer 1

这将是丑陋的。当出现ng-click时，它会在每行的顶部生成一个按钮，并为每个字段添加“user-select：none”。这就是为什么它不可选择。

如果您真的想让它可选，您可以在字段上设置z-index以将其置于前面并设置user-select：text以使其可选。此外，最好使用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>