Material Design 自动完成功能使项目无法选择答案

【问题标题】：Material Design autocomplete make an item unselectableMaterial Design 自动完成功能使项目无法选择
【发布时间】：2016-03-18 10:38:58
【问题描述】：

我正在使用 Material Design 和 AngularJS，我想在我的自动完成中显示一些不可选择的元素。

我的自动完成显示实体可以与用户正在处理的实体链接。其中一些实体已经链接到另一个实体。我想显示它们，但使它们无法选择。

这是我在 tpl.html 文件中的自动完成功能：

    <md-autocomplete 
        md-no-cache="noCache"
        md-selected-item="selectedItem"
        md-search-text="searchText"
        md-selected-item-change= "controller.selectedItemChange(item)"
        md-items="item in controller.searchEntities(searchText)"
        md-item-text="item.display"
        md-min-length="3"
        placeholder="Enter Keyword"
        md-input-name="autocompleteEntities">
        <md-item-template>
            <span ng-show="!item.isLinked"md-highlight-text="searchText" md-highlight-flags="^i">
                {{item.display}}
            </span>
            <span class="linkedEntity" ng-show="item.isLinked"md-highlight-text="searchText" md-highlight-flags="^i">
                {{item.display}} <!-- Item I want to be unselectable -->
            </span>
        </md-item-template>
        <md-not-found>
            No Result For "{{searchText}}".
        </md-not-found>
    </md-autocomplete>

我的自动完成功能正在运行，并为我获取我想要的实体。

我已经尝试使用pointer-events: none; 使该项目无法选择，但它仍然可以选择。

如何使项目无法选择？

任何帮助将不胜感激，在此先感谢。

【问题讨论】：

标签： angularjs autocomplete material-design

【解决方案1】：

<md-item-template>
     <span ng-click="$event.stopPropagation()">
            <span ng-show="!item.isLinked"md-highlight-text="searchText" md-highlight-flags="^i">
                {{item.display}}
            </span>
            <span class="linkedEntity" ng-show="item.isLinked"md-highlight-text="searchText" md-highlight-flags="^i">
                {{item.display}} <!-- Item I want to be unselectable -->
            </span>
    </span>
</md-item-template>

并且样式包装器忽略悬停

或

<md-item-template>
                <span md-selectable="your.expression"> </span>
</md-item-template>

angular.module('module').directive('mdSelectable', function($parse){
        return {
            restrict: 'A',
            link($scope, $elem, iAttrs){
                var liContainer = $elem.closest('li');
                if(!$parse(iAttrs.mdSelectable)($scope)){
                    liContainer.addClass('md-non-selectable');
                }

            }
        };
    });

并禁用 .md-non-selectable 中的指针事件

【讨论】：