Tags 如何在ui选择下复制标记文本

我需要用户能够选择（使用鼠标或键盘）选定的标记值，并能够以某种方式复制文本。在下面的示例plunker中，我需要用户能够复制文本“蓝色”/“红色”-

有什么建议吗？

您可以这样做：

创建一个指令，通过双击事件将项目的值复制到剪贴板：

app.directive('uiSelectCopy', [function(){
    return {
        restrict: 'A',
        scope: {
            $item: '=ngBind'
        },
        link: function ($scope, $elm) {
            $elm.on('dblclick', function(){
                let value = $scope.$item || this.innerText;
                let input = angular.element(`<input value="${value}"/>`);
                angular.element(document.body).append(input);
                input[0].select();
                document.execCommand('copy');
                input.remove();
            });
        }
    }
}])

app.directive（'uiSelectCopy'，[function（）{
返回{
限制：“A”，
范围：{
$item:'=ngBind'
},
链接：函数（$scope$elm）{
$elm.on（'dblclick'，function（）{
let value=$scope.$item | | this.innerText；
让输入=angular.element（``）；
元素（document.body）.append（input）；
输入[0]。选择（）；
document.execCommand（'copy'）；
input.remove（）；
});
}
}
}])

然后将此指令添加到用户界面选择匹配：

<ui-select multiple tagging tagging-label="(custom 'new' label)" ng-model="multipleDemo.colors" theme="bootstrap"
    sortable="true" ng-disabled="disabled" style="width: 300px;" title="Choose a color">
    <ui-select-match placeholder="Select colors...">
        <span ng-bind="$item" ui-select-copy></span>
    </ui-select-match>
    <ui-select-choices repeat="color in availableColors | filter:$select.search">
        {{color}}
    </ui-select-choices>
</ui-select>

{{color}}

如果需要，您还可以将事件更改为单击一次。

您可以执行以下操作：

创建一个指令，通过双击事件将项目的值复制到剪贴板：

app.directive('uiSelectCopy', [function(){
    return {
        restrict: 'A',
        scope: {
            $item: '=ngBind'
        },
        link: function ($scope, $elm) {
            $elm.on('dblclick', function(){
                let value = $scope.$item || this.innerText;
                let input = angular.element(`<input value="${value}"/>`);
                angular.element(document.body).append(input);
                input[0].select();
                document.execCommand('copy');
                input.remove();
            });
        }
    }
}])

app.directive（'uiSelectCopy'，[function（）{
返回{
限制：“A”，
范围：{
$item:'=ngBind'
},
链接：函数（$scope$elm）{
$elm.on（'dblclick'，function（）{
let value=$scope.$item | | this.innerText；
让输入=angular.element（``）；
元素（document.body）.append（input）；
输入[0]。选择（）；
document.execCommand（'copy'）；
input.remove（）；
});
}
}
}])

然后将此指令添加到用户界面选择匹配：

<ui-select multiple tagging tagging-label="(custom 'new' label)" ng-model="multipleDemo.colors" theme="bootstrap"
    sortable="true" ng-disabled="disabled" style="width: 300px;" title="Choose a color">
    <ui-select-match placeholder="Select colors...">
        <span ng-bind="$item" ui-select-copy></span>
    </ui-select-match>
    <ui-select-choices repeat="color in availableColors | filter:$select.search">
        {{color}}
    </ui-select-choices>
</ui-select>

{{color}}

如果需要，还可以将事件更改为单击一次