Как скопировать текст тега в UI-Select

Question

Мне нужно, чтобы пользователь мог выбирать (используя мышь или клавиатуру) выбранное значение тега и иметь возможность каким-либо образом копировать текст. В следующем примере плунжера мне нужно, чтобы пользователь мог копировать текст «синий» / «красный» -

UI-выберите образец тегирования

Есть предложения?

Answer 1

Вы можете сделать это:

Создать директиву для копирования значения элемента в буфер обмена с событием двойного щелчка:

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();
            });
        }
    }
}])

И затем добавить эту директиву к вашемуui-select-match:

<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>

Вы также можете изменить событие на один клик, если хотите.