AngularJS: Как использовать ngclipboard с ng-show / ng-hide?

Question

Я реализую функцию, которая при нажатии кнопки копирует некоторый текст. Я не хочу показывать текст и не хочу испортить свой макет.

Я пытаюсь использовать ngclipboard и ng-hide, следуя инструкциям этого поста

https://medium.com/@kris.stange2015/use-ngclipboard-with-an-angular-ng-repeat-directive-398d4eaf2c83

Мой код работает очень похоже на пост

<button type="button"
            class="button button--info"
            ng-if="!some_iter.show"
            ngclipboard
            data-clipboard-target="#someTag{{$index}}"
            ngclipboard-success="ctrl.onClipboardSuccess(e)"
            ngclipboard-error="ctrl.onClipboardError(e)">Copy Invite Link</button>
<input class='input-hide' id="someTag{{$index}}" ng-value="some_iter.url"></input>

Я столкнулся с точной проблемой, которую он или она упомянул, и это значение не может быть зафиксировано при сокрытии input. Я попробовал метод работы, и это портит мой макет. Мои вопросы:

1. почему бы не сработать, если я скрою значение? Насколько я знаю, ng-hide работает только с css, и почему display: none и visibility: none не работают? Компонент все еще там, верно?

2. Как убедиться, что мой макет не испортился, если я использую opacity: 0? По сути, как у меня нет странного пустого места, где пользователи все еще могут каким-то образом перетаскивать и копировать текст (это не важно, но мне это не нравится)

Answer 1

разобрался. Вместо того, чтобы иметь дело с полем ввода, мы можем напрямую вводить данные в ngclipboard, используя

<button type="button"
            class="button button--info"
            ng-if="!some_iter.show"
            ngclipboard
            data-clipboard-text="{{some_iter.url}}"
            ngclipboard-success="ctrl.onClipboardSuccess(e)"
            ngclipboard-error="ctrl.onClipboardError(e)">Copy Invite Link</button>

и мы можем удалить

<input class='input-hide' id="someTag{{$index}}" ng-value="some_iter.url"></input>