2016-04-08 14 views
1

md-list-item内のテキストを選択可能にしたい。しかし、要素のng-clickが設定されていると、行全体がボタンになり、ユーザーが要素のテキストを選択できなくなることがわかりました。どのように私はこの機能をオーバーライドすることができますか?ここで角材クリック可能なmd-list-itemテキストを選択可能にする

enter image description here

コードです:

enter image description here

答えて

5

これは醜いになるだろう。 ng-clickが表示されたら、各行の上にボタンを生成し、各フィールドに 'user-select:none'を追加します。それが選択できない理由です。

実際に選択可能にしたい場合は、フィールドにz-indexを設定して前面に表示し、user-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

1

角度素材ドキュメントでこの動作を指定しませんでした。しかし、md-list-itemにng-click="false"を追加することもできます。

<md-list-item ng-click="false"> 
    <span>...</span> 
    <a ng-click="f()">...</a> 
</md-list-item> 
関連する問題